better visualisation

app.py

@@ -8,12 +8,11 @@ import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
 DESCRIPTION = """\
-# Hi, I'm Gemma 2 (2B) 👋
+<h1 style="text-align: center;">Hi, I'm Gemma 2 (2B) 👋</h1>
 
-This is a demo of [`google/gemma-2-2b-it`](https://huggingface.co/google/gemma-2-2b-it), fine-tuned for instruction following.
-For more details, please check [the post](https://huggingface.co/blog/gemma2).
+This is a demo of <strong>google/gemma-2-2b-it</strong> fine-tuned for instruction following. For more details, please check <a href="https://huggingface.co/blog/gemma2" target="_blank">the post</a>.
 
-👉 Looking for a larger and more powerful version? Try the 27B version in [HuggingChat](https://huggingface.co/chat/models/google/gemma-2-27b-it) and the 9B version in [this Space](https://huggingface.co/spaces/huggingface-projects/gemma-2-9b-it).
+👉 Looking for a larger and more powerful version? Try the 27B version in <a href="https://huggingface.co/chat/models/google/gemma-2-27b-it" target="_blank">HuggingChat</a> and the 9B version in <a href="https://huggingface.co/spaces/huggingface-projects/gemma-2-9b-it" target="_blank">this Space</a>.
 """
 
 MAX_MAX_NEW_TOKENS = 2048
@@ -73,84 +72,98 @@ def generate(
         yield "".join(outputs)
 
 
-# Embed our custom Gemini-like CSS here:
+# A revised Gemini-like CSS with smoother gradients and better contrast.
 gemini_css = """
 :root {
-  /* Adjust these if you want different start/end colors. */
-  --gradient-start: #0077BE; /* Marine/clear blue */
-  --gradient-end:   #FFFFFF; /* White */
+  --gradient-start: #66AEEF; /* lighter top */
+  --gradient-end:   #F0F8FF; /* very light at bottom */
 }
 
-/* Overall page and container background gradient */
+/* Overall page & container background gradient */
 html, body, .gradio-container {
   margin: 0;
   padding: 0;
   background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
   font-family: "Helvetica", sans-serif;
-  color: #003366; /* A darker blue for text */
+  color: #333; /* dark gray for better contrast */
 }
 
-/* Center and style the h1 in the description block */
+/* Make anchor (link) text a clearly visible dark blue */
+a, a:visited {
+  color: #02497A !important;
+  text-decoration: underline;
+}
+
+/* Center the top headings in the description */
 .gradio-container h1 {
+  margin-top: 0.8em;
+  margin-bottom: 0.5em;
   text-align: center;
-  margin-top: 1.2em;
-  margin-bottom: 0.6em;
+  color: #fff; /* White text on top gradient for pop */
 }
 
-/* Chat area styling */
-.chat-interface, .chat-interface .message {
-  background-color: transparent;
+/* Chat container background: a very light blue so it's distinct from the outer gradient */
+.chat-interface, .chat-interface .wrap {
+  background-color: #F8FDFF !important;
 }
 
-/* User message bubble */
+/* Remove harsh frames around chat messages */
+.chat-message {
+  border: none !important;
+}
+
+/* User message bubble: a deeper blue with white text */
 .chat-message.user {
-  background-color: #0099FF;
-  color: #FFFFFF;
+  background-color: #0284C7 !important;
+  color: #FFFFFF !important;
   border-radius: 8px;
   padding: 8px 12px;
-  margin: 4px 0;
+  margin: 6px 0;
 }
 
-/* Bot message bubble */
+/* Bot message bubble: very light blue with darker text */
 .chat-message.bot {
-  background-color: #E0F2FF;
-  color: #003366;
+  background-color: #EFF8FF !important;
+  color: #333 !important;
   border-radius: 8px;
   padding: 8px 12px;
-  margin: 4px 0;
+  margin: 6px 0;
 }
 
-/* Chat input */
+/* Chat input area */
 .chat-input textarea {
   background-color: #FFFFFF;
-  color: #003366;
-  border: 1px solid #0099FF;
+  color: #333;
+  border: 1px solid #66AEEF;
   border-radius: 6px;
+  padding: 8px;
 }
 
-/* Slider bars, buttons, etc. */
+/* Sliders & other controls */
 form.sliders input[type="range"] {
-  accent-color: #0077BE;
+  accent-color: #66AEEF;
 }
 form.sliders label {
-  color: #003366;
+  color: #333;
 }
 
 .gradio-button, .chat-send-btn {
-  background-color: #0077BE;
-  color: #FFFFFF;
+  background-color: #0284C7 !important;
+  color: #FFFFFF !important;
   border-radius: 5px;
   border: none;
   cursor: pointer;
 }
-
 .gradio-button:hover, .chat-send-btn:hover {
-  background-color: #005FA0;
+  background-color: #026FA6 !important;
 }
 
-/* For warnings or system notes */
-.text-orange-500 {
-  color: #FF6600 !important;
+/* Additional spacing / small tweaks */
+#duplicate-button {
+  margin: auto;
+  background: #1565c0;
+  border-radius: 100vh;
+  color: #fff;
 }
 """
 
@@ -204,7 +217,6 @@ demo = gr.ChatInterface(
     cache_examples=False,
     type="messages",
     description=DESCRIPTION,
-    # Removing css_paths, replace with direct CSS:
     css=gemini_css,
     fill_height=True,
 )