adding icons, improving user interface

app.py

@@ -1,4 +1,5 @@
 import os
+import queue
 from collections.abc import Iterator
 from threading import Thread
 
@@ -42,6 +43,7 @@ def generate(
     top_k: int = 50,
     repetition_penalty: float = 1.2,
 ) -> Iterator[str]:
+    """Generate text from the model and stream tokens back to the UI."""
     conversation = chat_history.copy()
     conversation.append({"role": "user", "content": message})
 
@@ -63,16 +65,24 @@ def generate(
         num_beams=1,
         repetition_penalty=repetition_penalty,
     )
+
     t = Thread(target=model.generate, kwargs=generate_kwargs)
     t.start()
 
     outputs = []
-    for text in streamer:
-        outputs.append(text)
-        yield "".join(outputs)
+    try:
+        for text in streamer:
+            outputs.append(text)
+            yield "".join(outputs)
+    except queue.Empty:
+        # End of stream; avoid traceback
+        return
 
 
-# A revised Gemini-like CSS with smoother gradients and better contrast.
+# Updated CSS to:
+# 1) give the examples a soft blue style,
+# 2) add small icons for user/bot,
+# 3) keep the overall smooth, Gemini-like gradient.
 gemini_css = """
 :root {
   --gradient-start: #66AEEF; /* lighter top */
@@ -110,9 +120,33 @@ a, a:visited {
 /* Remove harsh frames around chat messages */
 .chat-message {
   border: none !important;
+  position: relative;
+}
+
+/* Icons for user and bot messages */
+.chat-message.user::before {
+  content: '';
+  display: inline-block;
+  background: url('user.png') center center no-repeat;
+  background-size: cover;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  vertical-align: middle;
 }
 
-/* User message bubble: a deeper blue with white text */
+.chat-message.bot::before {
+  content: '';
+  display: inline-block;
+  background: url('gemma.png') center center no-repeat;
+  background-size: cover;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+/* User bubble: a deeper blue with white text */
 .chat-message.user {
   background-color: #0284C7 !important;
   color: #FFFFFF !important;
@@ -121,7 +155,7 @@ a, a:visited {
   margin: 6px 0;
 }
 
-/* Bot message bubble: very light blue with darker text */
+/* Bot bubble: very light blue with darker text */
 .chat-message.bot {
   background-color: #EFF8FF !important;
   color: #333 !important;
@@ -158,6 +192,28 @@ form.sliders label {
   background-color: #026FA6 !important;
 }
 
+/* Style the example "pill" buttons */
+.show-examples {
+  display: flex !important;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
+.show-examples .example {
+  background-color: #EFF8FF;
+  border: 1px solid #66AEEF;
+  border-radius: 8px;
+  color: #333 !important;
+  padding: 10px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.show-examples .example:hover {
+  background-color: #E0F2FF;
+}
+
 /* Additional spacing / small tweaks */
 #duplicate-button {
   margin: auto;