fix html

app.py

@@ -47,7 +47,7 @@ html_template = """
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         h1 {
-            font-size: 2rem;
+            font-size: 1.5rem;
             margin-bottom: 1.5rem;
             color: #333;
             text-align: center;
@@ -134,25 +134,28 @@ html_template = """
         .result .box {
             flex: 1;
             margin: 0.5rem;
-            padding: 1rem;
-            background-color: #e9ecef;
-            border-radius: 10px;
-            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+            padding: 0.5rem;
+            background-color:#fafafa;
+            color:#4a4a4a;
             word-wrap: break-word;
-            height: 400px;
+            height: 500px;
             overflow-y: auto;
-            font-size: 1rem;
+            font-size: 0.9rem;
             font-family: "Times New Roman", Times, serif;
-            line-height: 1.5;
+            line-height: 1.8;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            border: 1px solid #ddd;
         }
         .error .box {
-            width: 100%;
+            width: 95%;
             padding: 1rem;
             background-color: #f8d7da;
             color: #721c24;
             border-radius: 10px;
             box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
             word-wrap: break-word;
+             margin-left: 1rem; 
         }
         h2 {
             font-size: 1.3rem;
@@ -164,13 +167,14 @@ html_template = """
             to { opacity: 1; }
         }
         .progress-bar-container {
-            width: 100%;
+            width: 99%;
             background-color: #e9ecef;
             border-radius: 10px;
             overflow: hidden;
-            margin-top: 1.5rem;
+            margin: 0.5rem auto;  /* 水平居中 */
             box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
         }
+
         .progress-bar {
             height: 20px;
             background-color: #727372;
@@ -182,39 +186,57 @@ html_template = """
             justify-content: space-between;
             align-items: center;
             margin-bottom: 1.5rem;
+            height: 50px;
+            margin-left: 1rem; 
         }
         .example-label {
             flex: 0.7;
-            font-size: 1 rem;
-            color: #333;
+            font-size: 1rem; /* 修正了 font-size 的语法 */
+            color: purple; /* 将字体颜色改为紫色 */
             text-align: center;
             margin-right: 0rem;
             padding: 0.5rem 0.2rem;
             background-color: #f0f8ff;
+            border: 1px solid white; /* 添加白色边框 */
             border-radius: 10px;
             box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-            font-family: 'Times new roman', cursive, sans-serif;
+            font-family: 'Times New Roman', cursive, sans-serif;
             text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+            position: relative; /* 为了放置表格状符号 */
+            display: flex;
+            align-items: center;
+        }
+
+        .example-label::before {
+            content: "📋"; /* 表格状符号 */
+            margin-right: 0.5rem; /* 符号和文本之间的间距 */
+            font-size: 1.2rem;
+            color: purple; /* 符号颜色也改成紫色 */
         }
         .example-topics {
             flex: 6;
             display: flex;
+            min-width: 80%;
             justify-content: space-around;
         }
         .example-topics button {
             padding: 0.5rem 1rem;
-            font-size: 1rem;
-            background-color: #ffa07a; /* 浅橙色 */
-            color: #fff;
+            font-size: 0.9rem;
+            background-color: #f0f8ff; /* 橙色 */ 
+            color: #000000;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             margin: 0.3rem;
             transition: background-color 0.3s ease;
+            height: 50px;
+            min-width: 320px;
+            border: 1px solid white; /* 添加白色边框 */
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+            font-family: 'Times New Roman', cursive, sans-serif;
         }
         .example-topics button:hover {
-            background-color: #ff4500; /* 深橙色 */
+            background-color: #e0e0e0; 
         }
     </style>
     <script>
@@ -270,7 +292,18 @@ html_template = """
 </head>
 <body>
     <div class="container">
-        <h1>CoI Agent online demo 😊</h1>
+        <div style="display: flex; justify-content: center; align-items: center; text-align: center; margin-bottom: 1.5rem;">
+        <div>
+            <h1 >CoI Agent: Revolutionizing Research in Novel Idea Development with LLM Agents</h1>           
+            <h3 style="margin: 0;">If this demo please you, please give us a star ⭐ on Github or 💖 on this space.</h3>
+            <h5 style="margin: 0;">
+                We only provide a simplified version here, and the number of replies is limited every day. <br>
+                At the same time, due to the instability of PDF downloads, the waiting time may be longer, thank you for your understand. <br>
+                If you want to experience the full version, please go to our github repository 
+            <a href="https://github.com/DAMO-NLP-SG/CoI-Agent" color="blue""> https://github.com/DAMO-NLP-SG/CoI-Agent </a>
+            </h5>
+        </div>
+        </div>
         <div class="time-counter-container">
             <div id="time-taken" class="time-box">Time Taken: {{ time_taken }} seconds</div>
             <div class="counter-box">Today's Replies: {{ reply_count }}/100 </div>
@@ -280,21 +313,19 @@ html_template = """
         </div>
         <div class="result">
             <div class="box">
-                <h2>Idea</h2>
                 <div>{{ idea | safe }}</div>
             </div>
         </div>
         <form action="/" method="post" onsubmit="showLoading()">
             <div class="form-group">
-                <label for="topic">Topic:</label>
-                <input type="text" id="topic" name="topic">
+                <input type="text" id="topic" name="topic" placeholder="Enter your topic">
                 <input type="hidden" id="user_id" name="user_id">
                 <input type="hidden" id="state" name="state">
                 <button type="submit" id="submit-btn">{{ button_text }}</button>
             </div>
         </form>
         <div class="example-container">
-        <div class="example-label">Example Input:</div>
+        <div class="example-label">Example:</div>
             <div class="example-topics">
                 <button onclick="fillTopic('Realistic Image Synthesis in Medical Imaging')">Realistic Image Synthesis in Medical Imaging</button>
                 <button onclick="fillTopic('Using diffusion to generate road layout')">Using diffusion to generate road layout</button>
@@ -328,7 +359,6 @@ scheduler = BackgroundScheduler()
 scheduler.add_job(reset_counter, 'cron', hour=0, minute=0)
 scheduler.start()
 
-queue = Queue()
 def fix_markdown(text):
     lines = text.split('\n')
     # Initialize the result list
@@ -360,6 +390,8 @@ script_template = """
     window.onload = setstate;
 """
 
+queue = Queue()
+
 @app.get("/", response_class=HTMLResponse)
 def form_get():