Update app.py

app.py

@@ -2,7 +2,9 @@ import gradio as gr
 import spaces
 import torch
 from transformers import AutoTokenizer, AutoModelForCausalLM
-
+from googlesearch import search  # Or use Serper API for better results
+import requests
+from bs4 import BeautifulSoup
 
 # Load the model and tokenizer
 model_name = "akjindal53244/Llama-3.1-Storm-8B"
@@ -13,14 +15,41 @@ model = AutoModelForCausalLM.from_pretrained(
     device_map="auto"
 )
 
+def fetch_web_content(url):
+    try:
+        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:
+        return "Could not fetch content from this URL"
+
+def web_search(query, num_results=3):
+    try:
+        results = []
+        for j in search(query, num_results=num_results, advanced=True):
+            content = fetch_web_content(j.url)
+            results.append({
+                "title": j.title,
+                "url": j.url,
+                "content": content[:1000]  # Limit content length
+            })
+        return results
+    except:
+        return []
+
 @spaces.GPU(duration=120)
-def generate_text(prompt, max_length, temperature):
+def generate_text(prompt, max_length, temperature, use_web):
+    if use_web:
+        search_results = web_search(prompt)
+        context = "\n".join([f"Source: {res['url']}\nContent: {res['content']}" for res in search_results])
+        prompt = f"Web Context:\n{context}\n\nUser Query: {prompt}"
+
     messages = [
-        {"role": "system", "content": "You are a helpful assistant."},
+        {"role": "system", "content": "You are a helpful assistant with web search capabilities."},
         {"role": "user", "content": prompt}
     ]
+    
     formatted_prompt = tokenizer.apply_chat_template(messages, add_generation_prompt=True, tokenize=False)
-
     inputs = tokenizer(formatted_prompt, return_tensors="pt").to(model.device)
 
     outputs = model.generate(
@@ -34,133 +63,248 @@ def generate_text(prompt, max_length, temperature):
 
     return tokenizer.decode(outputs[0][inputs['input_ids'].shape[1]:], skip_special_tokens=True)
 
-
-# Custom CSS
+# Enhanced CSS
 css = """
+:root {
+    --primary: #e94560;
+    --secondary: #1a1a2e;
+    --background: #16213e;
+    --text: #e0e0e0;
+}
+
 body {
-    background-color: #1a1a2e;
-    color: #e0e0e0;
-    font-family: 'Arial', sans-serif;
+    background-color: var(--background);
+    color: var(--text);
+    font-family: 'Inter', sans-serif;
 }
+
 .container {
-    max-width: 900px;
+    max-width: 1200px;
     margin: auto;
     padding: 20px;
 }
+
 .gradio-container {
-    background-color: #16213e;
+    background-color: var(--background);
     border-radius: 15px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
+
 .header {
-    background-color: #0f3460;
-    padding: 20px;
+    background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%);
+    padding: 2rem;
     border-radius: 15px 15px 0 0;
     text-align: center;
-    margin-bottom: 20px;
+    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 {
-    color: #e94560;
-    font-size: 2.5em;
-    margin-bottom: 10px;
+    color: var(--primary);
+    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;
 }
-.header img {
-    max-width: 300px;
-    border-radius: 10px;
-    margin: 15px auto;
-    display: block;
-}
+
 .input-group, .output-group {
-    background-color: #1a1a2e;
-    padding: 20px;
-    border-radius: 10px;
-    margin-bottom: 20px;
+    background-color: var(--secondary);
+    padding: 2rem;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    border: 1px solid #2d2d4d;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
-.input-group label, .output-group label {
-    color: #e94560;
-    font-weight: bold;
+
+.input-group:hover, .output-group:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
 }
+
 .generate-btn {
-    background-color: #e94560 !important;
+    background: linear-gradient(135deg, var(--primary) 0%, #c81e45 100%) !important;
     color: white !important;
     border: none !important;
-    border-radius: 5px !important;
-    padding: 10px 20px !important;
-    font-size: 16px !important;
+    border-radius: 8px !important;
+    padding: 12px 28px !important;
+    font-size: 1.1rem !important;
     cursor: pointer !important;
-    transition: background-color 0.3s ease !important;
+    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
 }
+
 .generate-btn:hover {
-    background-color: #c81e45 !important;
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4) !important;
 }
+
 .example-prompts {
     background-color: #1f2b47;
-    padding: 15px;
-    border-radius: 10px;
-    margin-bottom: 20px;
+    padding: 1.5rem;
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    border: 1px solid #3d3d6d;
 }
+
 .example-prompts h3 {
-    color: #e94560;
-    margin-bottom: 10px;
+    color: var(--primary);
+    margin-bottom: 1rem;
+    font-size: 1.3rem;
 }
+
 .example-prompts ul {
-    list-style-type: none;
-    padding-left: 0;
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
 }
+
 .example-prompts li {
-    margin-bottom: 5px;
+    background-color: var(--secondary);
+    padding: 1rem;
+    border-radius: 8px;
     cursor: pointer;
-    transition: color 0.3s ease;
+    transition: all 0.2s ease;
+    border: 1px solid #3d3d6d;
 }
+
 .example-prompts li:hover {
-    color: #e94560;
+    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
 example_prompts = [
-    "Write a Python function to find the n-th Fibonacci number.",
-    "Explain the concept of recursion in programming.",
-    "What are the key differences between Python and JavaScript?",
-    "Tell me a short story about a time-traveling robot.",
-    "Describe the process of photosynthesis in simple terms."
+    "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"
 ]
 
-# Gradio interface
-# Gradio interface
-with gr.Blocks(css=css) as iface:
-    gr.HTML(
-        """
+with gr.Blocks(css=css, theme=gr.themes.Default()) as iface:
+    gr.HTML("""
         <div class="header">
-            <h1>Llama-3.1-Storm-8B Text Generation</h1>
-            <p>Generate text using the powerful Llama-3.1-Storm-8B model. Enter a prompt and let the AI create!</p>
-            <img src="https://cdn-uploads.huggingface.co/production/uploads/64c75c1237333ccfef30a602/tmOlbERGKP7JSODa6T06J.jpeg" alt="Llama">
+            <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;">
         </div>
-        """
-    )
+    """)
 
-    with gr.Group():
-        with gr.Group(elem_classes="example-prompts"):
-            gr.HTML("<h3>Example Prompts:</h3>")
-            example_buttons = [gr.Button(prompt) for prompt in example_prompts]
+    with gr.Tabs():
+        with gr.TabItem("Chat Assistant"):
+            with gr.Row():
+                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]
 
-        with gr.Group(elem_classes="input-group"):
-            prompt = gr.Textbox(label="Prompt", placeholder="Enter your prompt here...", lines=5)
-            max_length = gr.Slider(minimum=1, maximum=500, value=128, step=1, label="Max Length")
-            temperature = gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature")
-            generate_btn = gr.Button("Generate", elem_classes="generate-btn")
+                    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")
+                        
+                        with gr.Group(elem_classes="web-toggle"):
+                            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")
+                        
+                        with gr.Group(elem_classes="param-group"):
+                            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")
+                        
+                        generate_btn = gr.Button("Generate Response", elem_classes="generate-btn")
 
-        with gr.Group(elem_classes="output-group"):
-            output = gr.Textbox(label="Generated Text", lines=10)
+                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")
 
-    generate_btn.click(generate_text, inputs=[prompt, max_length, temperature], outputs=output)
+        with gr.TabItem("Web Search Results"):
+            web_results = gr.JSON(label="Search Results Preview", visible=True)
+
+    # Event handling
+    generate_btn.click(
+        generate_text,
+        inputs=[prompt, max_length, temperature, web_search_toggle],
+        outputs=output
+    ).then(
+        lambda q: web_search(q) if q else [],
+        inputs=[prompt],
+        outputs=web_results
+    )
+
+    for btn in example_btns:
+        btn.click(lambda x: x, inputs=[btn], outputs=[prompt])
+
+    copy_btn.click(lambda x: x, inputs=[output], outputs=[]).then(
+        None,
+        _js="() => navigator.clipboard.writeText(document.getElementById('main-output').value)"
+    )
 
-    # Set up example prompt buttons
-    for button in example_buttons:
-        button.click(lambda x: x, inputs=[button], outputs=[prompt])
+    clear_btn.click(lambda: "", outputs=[output])
 
-# Launch the app
 iface.launch()