Update app.py

app.py

@@ -7,6 +7,60 @@ from datasets import Dataset, DatasetDict, load_dataset, load_from_disk
 from huggingface_hub import HfApi, HfFolder
 from functools import lru_cache
 
+# 定義 CSS 樣式
+custom_css = """
+#title {
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+}
+#subtitle {
+    font-size: 1.5em;
+    text-align: center;
+    margin-bottom: 20px;
+}
+#links {
+    text-align: center;
+    margin-bottom: 30px;
+}
+#user_input, #improvement_input, #feedback_output {
+    width: 100%;
+    margin-bottom: 10px;
+}
+#chatbot {
+    height: 500px;
+    overflow-y: auto;
+    background: #f7f7f7;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #ccc;
+}
+#feedback_display {
+    background: #f7f7f7;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #ccc;
+}
+.gr-button {
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+.gr-button:hover {
+    background-color: #45a049;
+}
+"""
+
 # 從環境變量中獲取 Hugging Face API 令牌和其他配置
 HF_API_TOKEN = os.environ.get("HF_API_TOKEN")
 LLM_API = os.environ.get("LLM_API")
@@ -148,29 +202,29 @@ examples = [
     ["請問high entropy nitride coatings的形成，主要可透過那些元素來讓這個材料形成熱穩定?"]
 ]
 
-with gr.Blocks() as iface:
-    gr.HTML(TITLE)
-    gr.HTML(SUBTITLE)
-    gr.HTML(LINKS)
+with gr.Blocks(css=custom_css) as iface:
+    gr.HTML('<div id="title">TITLE</div>')
+    gr.HTML('<div id="subtitle">SUBTITLE</div>')
+    gr.HTML('<div id="links">LINKS</div>')
     with gr.Row():
-        chatbot = gr.Chatbot()
+        chatbot = gr.Chatbot(elem_id="chatbot")
     
     with gr.Row():
-        user_input = gr.Textbox(label='輸入您的問題', placeholder="在此輸入問題...")
-        submit_button = gr.Button("輸入問題後，請點我送出")
+        user_input = gr.Textbox(label='輸入您的問題', placeholder="在此輸入問題...", elem_id="user_input")
+        submit_button = gr.Button("問題輸入好，請點我送出", elem_id="submit_button")
     
     gr.Examples(examples=examples, inputs=user_input)
         
     with gr.Row():
-        like_button = gr.Button(" 👍 覺得答案很好請按我")
-        dislike_button = gr.Button(" 👎 覺得答案待改善請輸入改進建議後按我")
-        improvement_input = gr.Textbox(label='請在此輸入改進建議', placeholder='請輸入如何改進模型回應的建議')
+        like_button = gr.Button("👍 覺得答案很棒，請按我；或者直接繼續問新問題亦可", elem_id="like_button")
+        dislike_button = gr.Button("👎 覺得答案待改善，請輸入改進建議，再按我送出保存", elem_id="dislike_button")
+        improvement_input = gr.Textbox(label='請輸入改進建議', placeholder='請輸入如何改進模型回應的建議', elem_id="improvement_input")
 
     with gr.Row():
-        feedback_output = gr.Textbox(label='反饋結果', interactive=False)
+        feedback_output = gr.Textbox(label='反饋結果執行狀態', interactive=False, elem_id="feedback_output")
     with gr.Row():
-        show_feedback_button = gr.Button("查看所有反饋")
-        feedback_display = gr.JSON(label='所有反饋')
+        show_feedback_button = gr.Button("查看目前所有反饋記錄", elem_id="show_feedback_button")
+        feedback_display = gr.JSON(label='所有反饋記錄', elem_id="feedback_display")
 
     def chat(user_input, history):
         response = handle_user_input(user_input)