Update app.py
Browse files
app.py
CHANGED
@@ -469,6 +469,7 @@ def load_session_history(selected_session=None):
|
|
469 |
transition: all 0.3s ease;
|
470 |
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
471 |
min-height: 300px;
|
|
|
472 |
}
|
473 |
.prompt-card:hover {
|
474 |
transform: translateY(-2px);
|
@@ -476,7 +477,7 @@ def load_session_history(selected_session=None):
|
|
476 |
}
|
477 |
.card-image {
|
478 |
width: 100%;
|
479 |
-
height:
|
480 |
object-fit: cover;
|
481 |
border-radius: 4px;
|
482 |
margin-bottom: 10px;
|
@@ -485,87 +486,38 @@ def load_session_history(selected_session=None):
|
|
485 |
font-weight: bold;
|
486 |
margin-bottom: 8px;
|
487 |
font-size: 16px;
|
|
|
488 |
}
|
489 |
.card-prompt {
|
490 |
-
font-size:
|
|
|
491 |
color: #666;
|
492 |
-
|
493 |
-
|
494 |
-
|
495 |
-
|
496 |
-
|
497 |
-
|
|
|
|
|
498 |
border-radius: 4px;
|
499 |
-
|
500 |
-
font-size: 0.9em;
|
501 |
-
transition: all 0.2s ease;
|
502 |
-
}
|
503 |
-
.copy-button:hover {
|
504 |
-
background: #e0e0e0;
|
505 |
}
|
506 |
</style>
|
507 |
<div class="prompt-grid">
|
508 |
"""
|
509 |
|
510 |
for item in json_data:
|
511 |
-
# JSON์ผ๋ก ์ง๋ ฌํํ์ฌ JavaScript ๋ฌธ์์ด๋ก ์์ ํ๊ฒ ๋ณํ
|
512 |
-
prompt_json = json.dumps(item.get('prompt', ''))
|
513 |
html_content += f"""
|
514 |
<div class="prompt-card">
|
515 |
<img src="{item.get('image_url', '')}" class="card-image" alt="{html.escape(item.get('name', ''))}">
|
516 |
<div class="card-name">{html.escape(item.get('name', ''))}</div>
|
517 |
<div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
|
518 |
-
<button class="copy-button" data-prompt={prompt_json}>
|
519 |
-
๐ ๋ณต์ฌ
|
520 |
-
</button>
|
521 |
</div>
|
522 |
"""
|
523 |
|
524 |
html_content += """
|
525 |
</div>
|
526 |
-
<script>
|
527 |
-
// ๋ชจ๋ ๋ณต์ฌ ๋ฒํผ์ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ถ๊ฐ
|
528 |
-
document.addEventListener('DOMContentLoaded', function() {
|
529 |
-
document.querySelectorAll('.copy-button').forEach(button => {
|
530 |
-
button.addEventListener('click', async function(e) {
|
531 |
-
e.preventDefault();
|
532 |
-
e.stopPropagation();
|
533 |
-
|
534 |
-
const promptText = this.dataset.prompt;
|
535 |
-
|
536 |
-
try {
|
537 |
-
// ํ
์คํธ ์์ญ ์์ฑ ๋ฐ ์ค์
|
538 |
-
const textarea = document.createElement('textarea');
|
539 |
-
textarea.value = promptText;
|
540 |
-
textarea.style.position = 'fixed';
|
541 |
-
textarea.style.left = '-9999px';
|
542 |
-
document.body.appendChild(textarea);
|
543 |
-
textarea.select();
|
544 |
-
|
545 |
-
// ๋ณต์ฌ ์๋
|
546 |
-
document.execCommand('copy');
|
547 |
-
document.body.removeChild(textarea);
|
548 |
-
|
549 |
-
// ๋ฒํผ ์ํ ์
๋ฐ์ดํธ
|
550 |
-
this.textContent = 'โ ๋ณต์ฌ๋จ';
|
551 |
-
this.style.backgroundColor = '#52c41a';
|
552 |
-
this.style.color = 'white';
|
553 |
-
|
554 |
-
// 2์ด ํ ์๋ ์ํ๋ก ๋ณต๊ตฌ
|
555 |
-
setTimeout(() => {
|
556 |
-
this.textContent = '๐ ๋ณต์ฌ';
|
557 |
-
this.style.backgroundColor = '#f0f0f0';
|
558 |
-
this.style.color = 'inherit';
|
559 |
-
}, 2000);
|
560 |
-
|
561 |
-
} catch (err) {
|
562 |
-
console.error('๋ณต์ฌ ์คํจ:', err);
|
563 |
-
alert('๋ณต์ฌ์ ์คํจํ์ต๋๋ค. ์ง์ ํ
์คํธ๋ฅผ ์ ํํ์ฌ ๋ณต์ฌํด์ฃผ์ธ์.');
|
564 |
-
}
|
565 |
-
});
|
566 |
-
});
|
567 |
-
});
|
568 |
-
</script>
|
569 |
"""
|
570 |
|
571 |
return gr.HTML(value=html_content)
|
|
|
469 |
transition: all 0.3s ease;
|
470 |
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
471 |
min-height: 300px;
|
472 |
+
cursor: pointer;
|
473 |
}
|
474 |
.prompt-card:hover {
|
475 |
transform: translateY(-2px);
|
|
|
477 |
}
|
478 |
.card-image {
|
479 |
width: 100%;
|
480 |
+
height: 180px;
|
481 |
object-fit: cover;
|
482 |
border-radius: 4px;
|
483 |
margin-bottom: 10px;
|
|
|
486 |
font-weight: bold;
|
487 |
margin-bottom: 8px;
|
488 |
font-size: 16px;
|
489 |
+
color: #333;
|
490 |
}
|
491 |
.card-prompt {
|
492 |
+
font-size: 11px;
|
493 |
+
line-height: 1.4;
|
494 |
color: #666;
|
495 |
+
display: -webkit-box;
|
496 |
+
-webkit-line-clamp: 6;
|
497 |
+
-webkit-box-orient: vertical;
|
498 |
+
overflow: hidden;
|
499 |
+
text-overflow: ellipsis;
|
500 |
+
height: 90px;
|
501 |
+
background-color: #f8f9fa;
|
502 |
+
padding: 8px;
|
503 |
border-radius: 4px;
|
504 |
+
border: 1px solid #eee;
|
|
|
|
|
|
|
|
|
|
|
505 |
}
|
506 |
</style>
|
507 |
<div class="prompt-grid">
|
508 |
"""
|
509 |
|
510 |
for item in json_data:
|
|
|
|
|
511 |
html_content += f"""
|
512 |
<div class="prompt-card">
|
513 |
<img src="{item.get('image_url', '')}" class="card-image" alt="{html.escape(item.get('name', ''))}">
|
514 |
<div class="card-name">{html.escape(item.get('name', ''))}</div>
|
515 |
<div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
|
|
|
|
|
|
|
516 |
</div>
|
517 |
"""
|
518 |
|
519 |
html_content += """
|
520 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
521 |
"""
|
522 |
|
523 |
return gr.HTML(value=html_content)
|