Update app.py

app.py

@@ -2,7 +2,7 @@ import gradio as gr
 import spaces
 import torch
 from transformers import AutoTokenizer, AutoModelForCausalLM
-from googlesearch import search  # Or use Serper API for better results
+from googlesearch import search
 import requests
 from bs4 import BeautifulSoup
 
@@ -20,7 +20,8 @@ def fetch_web_content(url):
         response = requests.get(url, timeout=10)
         soup = BeautifulSoup(response.text, 'html.parser')
         return ' '.join(p.get_text() for p in soup.find_all('p'))
-    except:
+    except Exception as e:
+        print(f"Error fetching {url}: {str(e)}")
         return "Could not fetch content from this URL"
 
 def web_search(query, num_results=3):
@@ -34,7 +35,8 @@ def web_search(query, num_results=3):
                 "content": content[:1000]  # Limit content length
             })
         return results
-    except:
+    except Exception as e:
+        print(f"Search error: {str(e)}")
         return []
 
 @spaces.GPU(duration=120)
@@ -63,7 +65,7 @@ def generate_text(prompt, max_length, temperature, use_web):
 
     return tokenizer.decode(outputs[0][inputs['input_ids'].shape[1]:], skip_special_tokens=True)
 
-# Enhanced CSS
+# CSS and UI components
 css = """
 :root {
     --primary: #e94560;
@@ -96,25 +98,6 @@ body {
     border-radius: 15px 15px 0 0;
     text-align: center;
     margin-bottom: 2rem;
-    position: relative;
-    overflow: hidden;
-}
-
-.header::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(233,69,96,0.1) 0%, transparent 70%);
-    animation: pulse 8s infinite;
-}
-
-@keyframes pulse {
-    0% { transform: scale(0.8); opacity: 0.5; }
-    50% { transform: scale(1.2); opacity: 0.2; }
-    100% { transform: scale(0.8); opacity: 0.5; }
 }
 
 .header h1 {
@@ -122,14 +105,6 @@ body {
     font-size: 2.8rem;
     margin-bottom: 1rem;
     font-weight: 700;
-    position: relative;
-}
-
-.header p {
-    color: #a0a0a0;
-    font-size: 1.1rem;
-    max-width: 800px;
-    margin: 0 auto;
 }
 
 .input-group, .output-group {
@@ -138,119 +113,33 @@ body {
     border-radius: 12px;
     margin-bottom: 2rem;
     border: 1px solid #2d2d4d;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.input-group:hover, .output-group:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
 }
 
 .generate-btn {
     background: linear-gradient(135deg, var(--primary) 0%, #c81e45 100%) !important;
     color: white !important;
-    border: none !important;
     border-radius: 8px !important;
     padding: 12px 28px !important;
-    font-size: 1.1rem !important;
-    cursor: pointer !important;
-    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
-}
-
-.generate-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4) !important;
-}
-
-.example-prompts {
-    background-color: #1f2b47;
-    padding: 1.5rem;
-    border-radius: 12px;
-    margin-bottom: 2rem;
-    border: 1px solid #3d3d6d;
-}
-
-.example-prompts h3 {
-    color: var(--primary);
-    margin-bottom: 1rem;
-    font-size: 1.3rem;
 }
 
 .example-prompts ul {
-    list-style: none;
-    padding: 0;
-    display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1rem;
 }
-
-.example-prompts li {
-    background-color: var(--secondary);
-    padding: 1rem;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: 1px solid #3d3d6d;
-}
-
-.example-prompts li:hover {
-    background-color: #2d2d4d;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-}
-
-.param-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1.5rem;
-    margin-bottom: 1.5rem;
-}
-
-.web-toggle {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-    background-color: var(--secondary);
-    border-radius: 8px;
-    margin-bottom: 1.5rem;
-}
-
-.output-controls {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1.5rem;
-}
-
-#copy-btn {
-    background: #2d2d4d !important;
-    border: 1px solid #3d3d6d !important;
-}
-
-#copy-btn:hover {
-    background: #3d3d6d !important;
-}
 """
 
 example_prompts = [
     "Explain quantum computing in simple terms",
     "Latest developments in AI research",
-    "How does blockchain technology work?",
     "Compare React and Vue.js frameworks",
-    "Best practices for Python async programming",
-    "Impact of climate change on marine life",
-    "Recent advancements in cancer treatment",
-    "Guide to starting a tech startup in 2024"
+    "Recent advancements in cancer treatment"
 ]
 
 with gr.Blocks(css=css, theme=gr.themes.Default()) as iface:
     gr.HTML("""
         <div class="header">
             <h1>Llama-3.1-Storm-8B AI Assistant</h1>
-            <p>Enhanced with real-time web search capabilities and multimodal interaction</p>
-            <img src="https://cdn-uploads.huggingface.co/production/uploads/64c75c1237333ccfef30a602/tmOlbERGKP7JSODa6T06J.jpeg" 
-                 alt="Llama" 
-                 style="border-radius: 12px; margin: 1.5rem 0;">
+            <p>Enhanced with real-time web search capabilities</p>
         </div>
     """)
 
@@ -260,17 +149,16 @@ with gr.Blocks(css=css, theme=gr.themes.Default()) as iface:
                 with gr.Column(scale=3):
                     with gr.Group(elem_classes="example-prompts"):
                         gr.Markdown("## Example Queries")
-                        example_btns = [gr.Button(prompt, scale=0) for prompt in example_prompts]
+                        example_btns = [gr.Button(prompt) for prompt in example_prompts]
 
                     with gr.Group(elem_classes="input-group"):
-                        prompt = gr.Textbox(label="Your Query", placeholder="Enter your question or prompt...", 
-                                          lines=5, elem_id="main-input")
+                        prompt = gr.Textbox(label="Your Query", placeholder="Enter your question...", lines=5)
                         
-                        with gr.Group(elem_classes="web-toggle"):
+                        with gr.Row():
                             web_search_toggle = gr.Checkbox(label="Enable Web Search", value=False)
-                            num_results = gr.Slider(1, 5, value=3, step=1, label="Search Results to Use")
+                            num_results = gr.Slider(1, 5, value=3, step=1, label="Search Results")
                         
-                        with gr.Group(elem_classes="param-group"):
+                        with gr.Row():
                             max_length = gr.Slider(32, 1024, value=256, step=32, label="Response Length")
                             temperature = gr.Slider(0.1, 2.0, value=0.7, step=0.1, label="Creativity")
                         
@@ -278,15 +166,15 @@ with gr.Blocks(css=css, theme=gr.themes.Default()) as iface:
 
                 with gr.Column(scale=2):
                     with gr.Group(elem_classes="output-group"):
-                        output = gr.Textbox(label="Generated Response", lines=12, elem_id="main-output")
-                        with gr.Group(elem_classes="output-controls"):
-                            copy_btn = gr.Button("Copy to Clipboard", elem_id="copy-btn")
-                            clear_btn = gr.Button("Clear Output", elem_id="copy-btn")
+                        output = gr.Textbox(label="Generated Response", lines=12)
+                        with gr.Row():
+                            copy_btn = gr.Button("Copy")
+                            clear_btn = gr.Button("Clear")
 
-        with gr.TabItem("Web Search Results"):
-            web_results = gr.JSON(label="Search Results Preview", visible=True)
+        with gr.TabItem("Web Results"):
+            web_results = gr.JSON(label="Search Results Preview")
 
-    # Event handling
+    # Event handlers
     generate_btn.click(
         generate_text,
         inputs=[prompt, max_length, temperature, web_search_toggle],
@@ -300,11 +188,12 @@ with gr.Blocks(css=css, theme=gr.themes.Default()) as iface:
     for btn in example_btns:
         btn.click(lambda x: x, inputs=[btn], outputs=[prompt])
 
-    copy_btn.click(lambda x: x, inputs=[output], outputs=[]).then(
+    copy_btn.click(
         None,
-        _js="() => navigator.clipboard.writeText(document.getElementById('main-output').value)"
+        inputs=[output],
+        _js="(text) => { navigator.clipboard.writeText(text); return [] }"
     )
-
+    
     clear_btn.click(lambda: "", outputs=[output])
 
 iface.launch()