Update app.py

app.py

@@ -4,7 +4,7 @@ import time
 import random
 
 # Load the model and tokenizer
-model_id = "microsoft/phi-2"
+model_id = "microsoft/phi-2"  # Change to your desired model
 tokenizer = AutoTokenizer.from_pretrained(model_id)
 model = AutoModelForCausalLM.from_pretrained(model_id)
 
@@ -33,61 +33,50 @@ def analyze_text(text):
 
 # --- Interface ---
 
-def custom_textbox(label, lines, placeholder, show_label=True):
-    textbox = gr.Textbox(label=label, lines=lines, placeholder=placeholder, show_label=show_label)
-    html = gr.HTML(f"""
-        <style>
-            .gradio-textbox {
-                background-color: #111111; 
-                color: #00FF00;
-                border: 1px solid #00FF00;
-            }
-        </style>
-    """)
-    return textbox, html
-
 css = """
 .gradio-container {
-  background-color: #000000; /* Black background for the container */
-  font-family: 'Roboto', sans-serif; /* Use a font similar to Nvidia's style */
+  background-color: #000000; /* Black background */
+  font-family: 'Roboto', sans-serif;
 }
 
 .gradio-interface {
-  background-color: rgba(0, 0, 0, 0.8); /* Translucent black background */
+  background-color: rgba(0, 0, 0, 0.8); /* Dark translucent background */
   border: 3px solid #00FF00; /* Green border */
-  border-radius: 15px; /* Rounded corners */
   padding: 20px;
   box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); /* Green shadow */
 }
 
 .gradio-button {
-  background-color: #00FF00; /* Green button color */
+  background-color: #00FF00; /* Green button */
   color: white;
   border: none;
   padding: 10px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
   font-size: 16px;
-  margin: 4px 2px;
   cursor: pointer;
-  border-radius: 5px; /* Rounded corners */
 }
 
 .gradio-button:hover {
   background-color: #00CC00; /* Darker green on hover */
 }
 
+.gradio-textbox {
+  background-color: #111111; /* Dark gray background */
+  color: #00FF00; /* Green text */
+  border: 1px solid #00FF00; /* Green border */
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
 .gradio-text-area {
-  resize: vertical; /* Allow vertical resizing for text areas */
-  background-color: #111111; /* Dark gray background for text areas */
-  color: #00FF00; /* Green text color for text areas */
-  border: 1px solid #00FF00; /* Green border for text areas */
+  background-color: #111111; /* Dark gray background */
+  color: #00FF00; /* Green text */
+  border: 1px solid #00FF00; /* Green border */
+  padding: 10px;
 }
 
 .gradio-slider {
-  background-color: #111111; /* Dark gray background for sliders */
-  color: #00FF00; /* Green text color for sliders */
+  background-color: #111111; /* Dark gray background */
+  color: #00FF00; /* Green text */
 }
 
 .gradio-slider .slider-bar {
@@ -98,20 +87,27 @@ css = """
   background-color: #00FF00; /* Green slider thumb */
 }
 
-h1 {
-  color: #00FF00; /* Green heading color */
+.gradio-label {
+  color: #00FF00; /* Green labels */
+}
+
+h1, h2 {
+  color: #00FF00; /* Green headings */
   text-align: center;
 }
 
-h2 {
-  color: #00FF00; /* Green subheading color */
+.analysis-container {
+  margin-top: 20px;
+  padding: 10px;
+  border: 1px solid #00FF00;
 }
 """
 
 iface = gr.Interface(
     fn=get_response,
     inputs=[
-        *custom_textbox(label="Your message:", lines=5, placeholder="Ask me anything...", show_label=True),
+        gr.Textbox(label="Your message:", lines=5, placeholder="Ask me anything...", show_label=True,
+                   style={'background-color': '#111111', 'color': '#00FF00', 'border': '1px solid #00FF00'}),
         gr.Slider(label="Temperature", minimum=0.1, maximum=1.0, step=0.1, value=0.7),
         gr.Slider(label="Top p", minimum=0.1, maximum=1.0, step=0.1, value=0.9),
         gr.Slider(label="Top k", minimum=1, maximum=100, step=1, value=50),
@@ -120,12 +116,12 @@ iface = gr.Interface(
     outputs=[
         gr.TextArea(label="AI Response:", lines=10,
                     style={'background-color': '#111111', 'color': '#00FF00', 'border': '1px solid #00FF00'}),
-        gr.Label(label="Text Analysis", elem_id="analysis", style={'color': '#00FF00'}),
+        gr.HTML(elem_id="analysis", style={'color': '#00FF00'}),
     ],
     title="NVIDIA AI Chat",
     description="Engage in a conversation with our advanced AI model. Customize the response using various parameters.",
-    theme="default",  # Use a custom theme to override the default Gradio styling
-    css=css,  # Apply the CSS styles defined earlier
+    theme="default",
+    css=css,
     layout="vertical",
     allow_flagging="never",
 )
@@ -137,8 +133,8 @@ def update_background():
         r = random.randint(0, 255)
         g = 255  # Keep the green component constant
         b = random.randint(0, 255)
-        iface.root.style.background_color = f"rgb({r}, {g}, {b})"  # Set dynamic background color
-        time.sleep(1)  # Update every second
+        iface.root.style.background_color = f"rgb({r}, {g}, {b})"
+        time.sleep(1)
 
 # Start a separate thread to update the background color
 gr.Interface.update(update_background, inputs=[], outputs=[], live=True)
@@ -147,11 +143,11 @@ gr.Interface.update(update_background, inputs=[], outputs=[], live=True)
 
 def update_analysis(response):
     analysis = analyze_text(response)
-    analysis_str = f"Number of characters: {analysis['Number of characters']}\n" \
-                  f"Number of words: {analysis['Number of words']}\n" \
-                  f"Number of tokens: {analysis['Number of tokens']}"
-    iface.update(analysis=analysis_str, live=True)  # Update analysis section with the generated data
+    analysis_str = f"<div class='analysis-container'>Number of characters: {analysis['Number of characters']}<br>" \
+                  f"Number of words: {analysis['Number of words']}<br>" \
+                  f"Number of tokens: {analysis['Number of tokens']}</div>"
+    iface.update(analysis=analysis_str, live=True)
 
-iface.outputs[0].postprocess = update_analysis  # Update analysis after every response
+iface.outputs[0].postprocess = update_analysis
 
 iface.launch(debug=True)