调整 UI (status_display) (#183)

* 给status_display加了css,
现在它位于右上角且不会高度乱跳, 样式为灰色等宽, 靠右下对齐
* 微调了标题和description的css
* 删去了直接用<div>的注释

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,13 +51,11 @@ with gr.Blocks(css=customCSS,) as demo:
     FALSECONSTANT = gr.State(False)
     topic = gr.State("未命名对话历史记录")
 
-    # gr.HTML("""
-    # <div style="text-align: center; margin-top: 20px;">
-    # """)
-    gr.HTML(title)
+    with gr.Row():
+        gr.HTML(title)
+        status_display = gr.Markdown("status: ready", elem_id="status_display")
 
     with gr.Row(scale=1).style(equal_height=True):
-
         with gr.Column(scale=5):
             with gr.Row(scale=1):
                 chatbot = gr.Chatbot().style(height=600)  # .style(color_map=("#1D51EE", "#585A5B"))
@@ -73,11 +71,8 @@ with gr.Blocks(css=customCSS,) as demo:
                 delLastBtn = gr.Button("🗑️ 删除一条对话")
                 reduceTokenBtn = gr.Button("♻️ 总结对话")
 
-
-
         with gr.Column():
             with gr.Column(min_width=50,scale=1):
-                status_display = gr.Markdown("status: ready")
                 with gr.Tab(label="ChatGPT"):
                     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])
@@ -117,14 +112,8 @@ with gr.Blocks(css=customCSS,) as demo:
                                 with gr.Column(scale=1):
                                     historyRefreshBtn = gr.Button("🔄 刷新")
 
-
-
-    gr.HTML("""
-    <div style="text-align: center; margin-top: 20px; margin-bottom: 20px;">
-    """)
     gr.Markdown(description)
 
-
     user_input.submit(predict, [keyTxt, systemPromptTxt, history, user_input, chatbot, token_count, top_p, temperature, use_streaming_checkbox, model_select_dropdown, use_websearch_checkbox], [chatbot, history, status_display, token_count], show_progress=True)
     user_input.submit(reset_textbox, [], [user_input])
 

presets.py

@@ -1,6 +1,6 @@
 # -*- coding:utf-8 -*-
-title = """<h1 align="left">川虎ChatGPT 🚀</h1>"""
-description = """<div align=center>
+title = """<h1 align="left" style="min-width:200px; margin-top:0;">川虎ChatGPT 🚀</h1>"""
+description = """<div align="center" style="margin-top:20px">
 
 由Bilibili [土川虎虎虎](https://space.bilibili.com/29125536) 和 [明昭MZhao](https://space.bilibili.com/24807452)开发
 
@@ -10,6 +10,17 @@ description = """<div align=center>
 </div>
 """
 customCSS = """
+#status_display {
+    display: flex;
+    min-height: 2.5em;
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+#status_display p {
+    font-size: .85em;
+    font-family: monospace;
+    color: var(--text-color-subdued) !important;
+}
 code {
     display: inline;
     white-space: break-spaces;
@@ -30,11 +41,9 @@ pre code {
     box-shadow: inset 0px 8px 16px hsla(0, 0%, 0%, .2)
 }
 
-*{
+* {
     transition: all 0.6s;
 }
-
-
 """
 
 summarize_prompt = "你是谁？我们刚才聊了什么？" # 总结对话时的 prompt