大幅美化布局 🗓️ TODO: status_display高度固定 (#172)

ChuanhuChatbot.py

@@ -43,7 +43,7 @@ else:
 
 gr.Chatbot.postprocess = postprocess
 
-with gr.Blocks(css=customCSS) as demo:
+with gr.Blocks(css=customCSS,) as demo:
     history = gr.State([])
     token_count = gr.State([])
     promptTemplates = gr.State(load_template(get_template_names(plain=True)[0], mode=2))
@@ -51,64 +51,78 @@ with gr.Blocks(css=customCSS) as demo:
     FALSECONSTANT = gr.State(False)
     topic = gr.State("未命名对话历史记录")
 
-    gr.HTML(title)
-    with gr.Row():
-        with gr.Column():
-            keyTxt = gr.Textbox(show_label=True, placeholder=f"在这里输入你的OpenAI API-key...",value=my_api_key, type="password", visible=not HIDE_MY_KEY, label="API-Key")
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 20px;">
+    """)
+
+    with gr.Row(scale=1).style(equal_height=True):
         with gr.Column():
-            with gr.Row():
+            with gr.Row(min_width=50,scale=1):
+                gr.HTML(title)
+                status_display = gr.Markdown("status: ready")
+                keyTxt = gr.Textbox(show_label=True, placeholder=f"OpenAI API-key...",value=my_api_key, type="password", visible=not HIDE_MY_KEY, label="API-Key")
                 model_select_dropdown = gr.Dropdown(label="选择模型", choices=MODELS, multiselect=False, value=MODELS[0])
-                use_streaming_checkbox = gr.Checkbox(label="实时传输回答", value=True, visible=enable_streaming_option)
-    chatbot = gr.Chatbot()  # .style(color_map=("#1D51EE", "#585A5B"))
-    with gr.Row():
-        with gr.Column(scale=12):
-            user_input = gr.Textbox(show_label=False, placeholder="在这里输入").style(
-                container=False)
-        with gr.Column(min_width=50, scale=1):
-            submitBtn = gr.Button("🚀", variant="primary")
-    with gr.Row():
-        emptyBtn = gr.Button("🧹 新的对话")
-        retryBtn = gr.Button("🔄 重新生成")
-        delLastBtn = gr.Button("🗑️ 删除最近一条对话")
-        reduceTokenBtn = gr.Button("♻️ 总结对话")
-    status_display = gr.Markdown("status: ready")
-
-    systemPromptTxt = gr.Textbox(show_label=True, placeholder=f"在这里输入System Prompt...", label="System prompt", value=initial_prompt).style(container=True)
-
-    with gr.Accordion(label="加载Prompt模板", open=False):
-        with gr.Column():
-            with gr.Row():
-                with gr.Column(scale=6):
-                    templateFileSelectDropdown = gr.Dropdown(label="选择Prompt模板集合文件", choices=get_template_names(plain=True), multiselect=False, value=get_template_names(plain=True)[0])
-                with gr.Column(scale=1):
-                    templateRefreshBtn = gr.Button("🔄 刷新")
-                    templaeFileReadBtn = gr.Button("📂 读入模板")
-            with gr.Row():
-                with gr.Column(scale=6):
-                    templateSelectDropdown = gr.Dropdown(label="从Prompt模板中加载", choices=load_template(get_template_names(plain=True)[0], mode=1), multiselect=False, value=load_template(get_template_names(plain=True)[0], mode=1)[0])
-                with gr.Column(scale=1):
-                    templateApplyBtn = gr.Button("⬇️ 应用")
-    with gr.Accordion(label="保存/加载对话历史记录", open=False):
-        with gr.Column():
-            with gr.Row():
-                with gr.Column(scale=6):
-                    saveFileName = gr.Textbox(
-                        show_label=True, placeholder=f"在这里输入保存的文件名...", label="设置保存文件名", value="对话历史记录").style(container=True)
-                with gr.Column(scale=1):
-                    saveHistoryBtn = gr.Button("💾 保存对话")
-            with gr.Row():
-                with gr.Column(scale=6):
-                    historyFileSelectDropdown = gr.Dropdown(label="从列表中加载对话", choices=get_history_names(plain=True), multiselect=False, value=get_history_names(plain=True)[0])
-                with gr.Column(scale=1):
-                    historyRefreshBtn = gr.Button("🔄 刷新")
-                    historyReadBtn = gr.Button("📂 读入对话")
-    #inputs, top_p, temperature, top_k, repetition_penalty
-    with gr.Accordion("参数", open=False):
-        top_p = gr.Slider(minimum=-0, maximum=1.0, value=1.0, step=0.05,
-                        interactive=True, label="Top-p (nucleus sampling)",)
-        temperature = gr.Slider(minimum=-0, maximum=2.0, value=1.0,
-                                step=0.1, interactive=True, label="Temperature",)
+                systemPromptTxt = gr.Textbox(show_label=True, placeholder=f"在这里输入System Prompt...", label="System prompt", value=initial_prompt).style(container=True)
+
+                #inputs, top_p, temperature, top_k, repetition_penalty
+                with gr.Accordion("参数", open=True):
+                    top_p = gr.Slider(minimum=-0, maximum=1.0, value=1.0, step=0.05,
+                                    interactive=True, label="Top-p (nucleus sampling)",)
+                    temperature = gr.Slider(minimum=-0, maximum=5.0, value=1.0,
+                                            step=0.1, interactive=True, label="Temperature",)
+                
+                
+                with gr.Accordion(label="加载Prompt模板", open=False):
+                    with gr.Column():
+                        with gr.Row():
+                            with gr.Column(scale=6):
+                                templateFileSelectDropdown = gr.Dropdown(label="选择Prompt模板集合文件", choices=get_template_names(plain=True), multiselect=False, value=get_template_names(plain=True)[0])
+                            with gr.Column(scale=1):
+                                templateRefreshBtn = gr.Button("🔄 刷新")
+                                templaeFileReadBtn = gr.Button("📂 读入模板")
+                        with gr.Row():
+                            with gr.Column(scale=6):
+                                templateSelectDropdown = gr.Dropdown(label="从Prompt模板中加载", choices=load_template(get_template_names(plain=True)[0], mode=1), multiselect=False, value=load_template(get_template_names(plain=True)[0], mode=1)[0])
+                            with gr.Column(scale=1):
+                                templateApplyBtn = gr.Button("⬇️ 应用")
+                with gr.Accordion(label="保存/加载对话历史记录", open=False):
+                    with gr.Column():
+                        with gr.Row():
+                            with gr.Column(scale=6):
+                                saveFileName = gr.Textbox(
+                                    show_label=True, placeholder=f"在这里输入保存的文件名...", label="设置保存文件名", value="对话历史记录").style(container=True)
+                            with gr.Column(scale=1):
+                                saveHistoryBtn = gr.Button("💾 保存对话")
+                        with gr.Row():
+                            with gr.Column(scale=6):
+                                historyFileSelectDropdown = gr.Dropdown(label="从列表中加载对话", choices=get_history_names(plain=True), multiselect=False, value=get_history_names(plain=True)[0])
+                            with gr.Column(scale=1):
+                                historyRefreshBtn = gr.Button("🔄 刷新")
+                                historyReadBtn = gr.Button("📂 读入对话")
 
+                use_streaming_checkbox = gr.Checkbox(label="实时传输回答", value=True, visible=enable_streaming_option)
+                
+
+                
+        with gr.Column(scale=5):
+            with gr.Row(scale=1):
+                chatbot = gr.Chatbot().style(height=700)  # .style(color_map=("#1D51EE", "#585A5B"))
+            with gr.Row(scale=1):
+                with gr.Column(scale=12):
+                    user_input = gr.Textbox(show_label=False, placeholder="在这里输入").style(
+                        container=False)
+                with gr.Column(min_width=50, scale=1):
+                    submitBtn = gr.Button("🚀", variant="primary")
+            with gr.Row(scale=1):
+                emptyBtn = gr.Button("🧹 新的对话",)
+                retryBtn = gr.Button("🔄 重新生成")
+                delLastBtn = gr.Button("🗑️ 删除最近一条对话")
+                reduceTokenBtn = gr.Button("♻️ 总结对话")
+    
+
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 20px; margin-bottom: 20px;">
+    """)
     gr.Markdown(description)
 
 

presets.py

@@ -1,5 +1,5 @@
 # -*- coding:utf-8 -*-
-title = """<h1 align="center">川虎ChatGPT 🚀</h1>"""
+title = """<h1 align="left">川虎ChatGPT 🚀</h1>"""
 description = """<div align=center>
 
 由Bilibili [土川虎虎虎](https://space.bilibili.com/29125536) 和 [明昭MZhao](https://space.bilibili.com/24807452)开发
@@ -29,6 +29,13 @@ pre code {
     color: #FFF;
     box-shadow: inset 0px 8px 16px hsla(0, 0%, 0%, .2)
 }
+
+*{
+    border-radius: 3px !important;
+    transition: all 0.6s;
+}
+
+
 """
 
 summarize_prompt = "你是谁？我们刚才聊了什么？" # 总结对话时的 prompt