added vlm model texting

app.py

@@ -1,64 +1,77 @@
 import gradio as gr
-from huggingface_hub import InferenceClient
+import torch
+from transformers import AutoProcessor, AutoModelForVision2Seq
 
-"""
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
-"""
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
+from web_data import custom_css, header, footer, shortcuts
 
+processor = AutoProcessor.from_pretrained("HuggingFaceTB/SmolVLM-256M-Instruct")
+model = AutoModelForVision2Seq.from_pretrained(
+    "HuggingFaceTB/SmolVLM-256M-Instruct",
+    torch_dtype=torch.bfloat16,
+)
 
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
-    messages = [{"role": "system", "content": system_message}]
 
-    for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
+def respond(message, history, image, system_message):
+    messages = [
+        {
+            "role": "system",
+            "content": [
+                {"type": "text", "text": system_message}
+            ]
+        },
+    ]
+    user_message = {
+        "role": "user",
+        "content": [
+            {"type": "text", "text": message}
+        ]
+    }
+    if image:
+        user_message['content'].append({"type": "image"})
+    messages.append(user_message)
 
-    messages.append({"role": "user", "content": message})
+    prompt = processor.apply_chat_template(messages, add_generation_prompt=True)
+    if image:
+        resized_image = image.resize((32, 32))
+        inputs = processor(text=prompt, images=[resized_image], return_tensors="pt")
+    else:
+        inputs = processor(text=prompt, return_tensors="pt")
 
-    response = ""
+    generated_ids = model.generate(**inputs, max_new_tokens=500)
+    generated_texts = processor.batch_decode(generated_ids, skip_special_tokens=True)
 
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = message.choices[0].delta.content
+    yield generated_texts[0].split('Assistant:')[1].strip()
 
-        response += token
-        yield response
 
+# ======the code below this section is pure vibing coding======
+with gr.Blocks(theme=gr.themes.Glass(), css=custom_css) as demo:
+    gr.HTML(header)
 
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
+    with gr.Row(variant="panel"):
+        with gr.Column(scale=1):
+            with gr.Accordion("🌀 CONTROL PANEL", open=True):
+                system_message = gr.Textbox(
+                    value="You're a cool AI that speaks Gen-Z slang 😎",
+                    label="🤖 BOT PERSONALITY",
+                    lines=2,
+                    max_lines=4,
+                    elem_classes="cyber-input"
+                )
+                image_input = gr.Image(
+                    type="pil",
+                    label="📸 UPLOAD PIC",
+                    height=200,
+                    elem_classes="glow-border"
+                )
+
+        with gr.Column(scale=3):
+            chat_interface = gr.ChatInterface(
+                respond,
+                additional_inputs=[image_input, system_message],
+                submit_btn="📤 SEND",
+            )
 
+    gr.HTML(footer)
 
 if __name__ == "__main__":
     demo.launch()

requirements.txt

@@ -1 +1,3 @@
-huggingface_hub==0.25.2
+gradio==5.25.0
+transformers==4.51.2
+torch==2.6.0

web_data.py

@@ -0,0 +1,144 @@
+custom_css = """
+:root {
+    --neon-pink: #ff6bff;
+    --cyber-blue: #00f7ff;
+    --acid-green: #7fff00;
+    --gradient-angle: 135deg;
+}
+
+.gradio-container {
+    background: linear-gradient(var(--gradient-angle), 
+        #0f0f0f 0%, 
+        #1a1a1a 50%, 
+        #0f0f0f 100%) !important;
+    font-family: 'Comic Neue', cursive !important;
+}
+
+.dark .gradio-container {
+    background: linear-gradient(var(--gradient-angle), 
+        #000000 0%, 
+        #1a1a1a 100%) !important;
+}
+
+.chat-message {
+    padding: 15px 25px !important;
+    border-radius: 30px !important;
+    margin: 15px 0 !important;
+    border: none !important;
+    position: relative;
+    transition: all 0.3s ease !important;
+    max-width: 80% !important;
+    font-size: 1.1em !important;
+}
+
+.user-message {
+    background: linear-gradient(45deg, #ff0080, #ff6bff) !important;
+    color: white !important;
+    margin-left: auto !important;
+    box-shadow: 0 4px 15px rgba(255,107,255,0.3) !important;
+}
+
+.bot-message {
+    background: linear-gradient(45deg, #00b4d8, #00f7ff) !important;
+    color: black !important;
+    margin-right: auto !important;
+    box-shadow: 0 4px 15px rgba(0,247,255,0.3) !important;
+}
+
+.chat-message::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    border-radius: 30px;
+    z-index: -1;
+    background: linear-gradient(45deg, 
+        var(--neon-pink), 
+        var(--cyber-blue), 
+        var(--acid-green));
+    animation: gradient-animation 3s ease infinite;
+}
+
+@keyframes gradient-animation {
+    0% { opacity: 0.3; }
+    50% { opacity: 0.7; }
+    100% { opacity: 0.3; }
+}
+
+.header-image {
+    width: 150px !important;
+    height: 150px !important;
+    object-fit: cover;
+    border-radius: 50% !important;
+    border: 3px solid var(--neon-pink) !important;
+    box-shadow: 0 0 20px var(--neon-pink) !important;
+    animation: float 4s ease-in-out infinite;
+}
+
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0px); }
+}
+
+button {
+    background: linear-gradient(45deg, #7fff00, #00f7ff) !important;
+    border: none !important;
+    border-radius: 15px !important;
+    color: black !important;
+    font-weight: bold !important;
+    text-transform: uppercase !important;
+    transition: all 0.3s ease !important;
+}
+
+button:hover {
+    transform: scale(1.05) !important;
+    box-shadow: 0 0 15px var(--acid-green) !important;
+}
+
+.gr-examples {
+    border: 2px solid var(--neon-pink) !important;
+    border-radius: 20px !important;
+    background: rgba(0,0,0,0.3) !important;
+}
+
+footer {
+    text-align: center !important;
+    color: #fff !important;
+    text-shadow: 0 0 10px var(--cyber-blue) !important;
+}
+"""
+header = """
+<div style="text-align: center; padding: 20px;">
+    <h1 style="
+        font-family: 'Bebas Neue', cursive;
+        font-size: 3.5em;
+        color: #7fff00;
+        text-shadow: 0 0 15px #7fff00;
+        margin: 0;
+    ">
+        VISION.TALK 🔮
+    </h1>
+    <img class="header-image" 
+         src="https://cdn-icons-png.flaticon.com/512/7858/7858975.png" 
+         alt="Cyber AI">
+    <p style="color: #00f7ff; margin: 10px 0; font-size: 1.2em;">
+        Upload. Chat. Vibing. Repeat. 🚀
+    </p>
+</div>
+"""
+footer = """
+<div class="glitch-wrapper" style="text-align: center; margin-top: 30px;">
+    <p class="glitch" data-text="⚠️ WARNING: AI MAY GENERATE RANDOM VIBES">⚠️ WARNING: AI MAY GENERATE RANDOM VIBES</p>
+    <p style="color: #00f7ff;">🔒 Your data stays chill • 🎨 Made with ~vibes~</p>
+</div>
+"""
+shortcuts = """
+<div style="text-align: center; margin: 20px 0;">
+    <p style="color: #ff6bff;">🔥 QUICK ACTIONS:</p>
+    <button style="margin: 5px;" onclick="document.querySelector('textarea').value='Rate this pic 1-10'">👾 Rate Pic</button>
+    <button style="margin: 5px;" onclick="document.querySelector('textarea').value='Make this pic go viral'">🚀 Viral Content</button>
+</div>
+"""