Update app.py
Browse files
app.py
CHANGED
@@ -452,9 +452,8 @@ def load_session_history(selected_session=None):
|
|
452 |
if TEMPLATE_CACHE:
|
453 |
return TEMPLATE_CACHE
|
454 |
|
455 |
-
|
456 |
-
|
457 |
-
remaining_items = json_data[12:] # 나머지 항목들
|
458 |
|
459 |
html_content = """
|
460 |
<style>
|
@@ -502,30 +501,11 @@ def load_session_history(selected_session=None):
|
|
502 |
padding: 8px;
|
503 |
border-radius: 4px;
|
504 |
}
|
505 |
-
#loadMore {
|
506 |
-
display: block;
|
507 |
-
margin: 20px auto;
|
508 |
-
padding: 10px 20px;
|
509 |
-
background: #1890ff;
|
510 |
-
color: white;
|
511 |
-
border: none;
|
512 |
-
border-radius: 4px;
|
513 |
-
cursor: pointer;
|
514 |
-
}
|
515 |
-
#loadMore:hover {
|
516 |
-
background: #40a9ff;
|
517 |
-
}
|
518 |
-
.loading {
|
519 |
-
text-align: center;
|
520 |
-
padding: 20px;
|
521 |
-
display: none;
|
522 |
-
}
|
523 |
</style>
|
524 |
<div class="prompt-grid" id="promptGrid">
|
525 |
"""
|
526 |
|
527 |
-
|
528 |
-
for item in initial_items:
|
529 |
html_content += f"""
|
530 |
<div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
|
531 |
<img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
|
@@ -534,61 +514,19 @@ def load_session_history(selected_session=None):
|
|
534 |
</div>
|
535 |
"""
|
536 |
|
537 |
-
|
538 |
-
html_content += f"""
|
539 |
<script>
|
540 |
-
|
541 |
-
let currentIndex = 0;
|
542 |
-
const ITEMS_PER_LOAD = 12;
|
543 |
-
|
544 |
-
function copyToInput(card) {{
|
545 |
const prompt = card.dataset.prompt;
|
546 |
const textarea = document.querySelector('.ant-input-textarea-large textarea');
|
547 |
-
if (textarea) {
|
548 |
textarea.value = prompt;
|
549 |
-
textarea.dispatchEvent(new Event('input', {
|
550 |
document.querySelector('.session-drawer .close-btn').click();
|
551 |
-
}
|
552 |
-
}
|
553 |
-
|
554 |
-
function loadMoreItems() {{
|
555 |
-
const grid = document.getElementById('promptGrid');
|
556 |
-
const endIndex = Math.min(currentIndex + ITEMS_PER_LOAD, remainingItems.length);
|
557 |
-
|
558 |
-
for (let i = currentIndex; i < endIndex; i++) {{
|
559 |
-
const item = remainingItems[i];
|
560 |
-
const card = document.createElement('div');
|
561 |
-
card.className = 'prompt-card';
|
562 |
-
card.onclick = () => copyToInput(card);
|
563 |
-
card.dataset.prompt = item.prompt;
|
564 |
-
|
565 |
-
card.innerHTML = `
|
566 |
-
<img src="${{item.image_url}}" class="card-image" loading="lazy" alt="${{item.name}}">
|
567 |
-
<div class="card-name">${{item.name}}</div>
|
568 |
-
<div class="card-prompt">${{item.prompt}}</div>
|
569 |
-
`;
|
570 |
-
|
571 |
-
grid.appendChild(card);
|
572 |
-
}}
|
573 |
-
|
574 |
-
currentIndex = endIndex;
|
575 |
-
|
576 |
-
// 모든 아이템을 로드했으면 버튼 숨기기
|
577 |
-
if (currentIndex >= remainingItems.length) {{
|
578 |
-
document.getElementById('loadMore').style.display = 'none';
|
579 |
-
}}
|
580 |
-
}}
|
581 |
-
|
582 |
-
// 스크롤 이벤트 리스너 추가
|
583 |
-
document.querySelector('.session-drawer').addEventListener('scroll', function(e) {{
|
584 |
-
const drawer = e.target;
|
585 |
-
if (drawer.scrollHeight - drawer.scrollTop - drawer.clientHeight < 100) {{
|
586 |
-
loadMoreItems();
|
587 |
-
}}
|
588 |
-
}});
|
589 |
</script>
|
590 |
</div>
|
591 |
-
<div class="loading">Loading more items...</div>
|
592 |
"""
|
593 |
|
594 |
TEMPLATE_CACHE = gr.HTML(value=html_content)
|
|
|
452 |
if TEMPLATE_CACHE:
|
453 |
return TEMPLATE_CACHE
|
454 |
|
455 |
+
# 최소한의 카드만 먼저 로드 (첫 12개)
|
456 |
+
json_data = load_json_data()[:16]
|
|
|
457 |
|
458 |
html_content = """
|
459 |
<style>
|
|
|
501 |
padding: 8px;
|
502 |
border-radius: 4px;
|
503 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
504 |
</style>
|
505 |
<div class="prompt-grid" id="promptGrid">
|
506 |
"""
|
507 |
|
508 |
+
for item in json_data:
|
|
|
509 |
html_content += f"""
|
510 |
<div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
|
511 |
<img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
|
|
|
514 |
</div>
|
515 |
"""
|
516 |
|
517 |
+
html_content += """
|
|
|
518 |
<script>
|
519 |
+
function copyToInput(card) {
|
|
|
|
|
|
|
|
|
520 |
const prompt = card.dataset.prompt;
|
521 |
const textarea = document.querySelector('.ant-input-textarea-large textarea');
|
522 |
+
if (textarea) {
|
523 |
textarea.value = prompt;
|
524 |
+
textarea.dispatchEvent(new Event('input', { bubbles: true }));
|
525 |
document.querySelector('.session-drawer .close-btn').click();
|
526 |
+
}
|
527 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
528 |
</script>
|
529 |
</div>
|
|
|
530 |
"""
|
531 |
|
532 |
TEMPLATE_CACHE = gr.HTML(value=html_content)
|