Update app.py

README.md

@@ -1,13 +1,13 @@
 ---
-title: TinkerSpace
-emoji: ⚡
+title: Granite Vision 3.1 2B
+emoji: 👀
 colorFrom: indigo
 colorTo: green
 sdk: gradio
+sdk_version: 5.15.0
 app_file: app.py
-pinned: true
-short_description: Demos for some my finetunes
-sdk_version: 6.2.0
+pinned: false
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -1,382 +1,122 @@
-import re
-import nltk
-import torch
 import spaces
-
+import random
+import torch
 import gradio as gr
+from transformers import LlavaNextProcessor, LlavaNextForConditionalGeneration
 
-from threading import Thread
-
-from nltk.tag import pos_tag
-from nltk.chunk import ne_chunk
-from nltk.tokenize import word_tokenize
-
-from peft import PeftModel
-from transformers import CsmForConditionalGeneration
-from transformers import AutoTokenizer, AutoModelForCausalLM, TextIteratorStreamer, AutoProcessor
-
-try:
-    nltk.data.find('tokenizers/punkt')
-    nltk.data.find('taggers/averaged_perceptron_tagger')
-    nltk.data.find('chunkers/maxent_ne_chunker')
-    nltk.data.find('corpora/words')
-except LookupError:
-    nltk.download('punkt', quiet=True)
-    nltk.download('averaged_perceptron_tagger', quiet=True)
-    nltk.download('maxent_ne_chunker', quiet=True)
-    nltk.download('words', quiet=True)
-
-
-SYSTEM_PROMPT = """You are an expert creative director specializing in visual descriptions for image generation.
-
-Your task: Transform the user's concept into a rich, detailed image description while PRESERVING their core idea.
-
-IMPORTANT RULES:
-1. Keep ALL key elements (intents, entities) from the original concept
-2. Enhance with artistic details, NOT change the fundamental idea
-3. Maintain the user's intended subject, action, and setting
-
-You should elaborate on:
-• Visual composition and perspective (bird's eye, close-up, wide angle, etc.)
-• Artistic style (photorealistic, impressionist, specific artist like Van Gogh, etc.)
-• Color palette and color temperature
-• Lighting (golden hour, dramatic shadows, soft diffused, etc.)
-• Atmosphere and mood
-• Textures and materials (rough, smooth, metallic, organic, etc.)
-• Technical details (medium, brushwork, rendering style)
-• Environmental context (time of day, weather, season, era)
-• Level of detail and focus points
-
-Output format: A single, flowing paragraph that reads naturally as an image prompt."""
-
-prompt_model = AutoModelForCausalLM.from_pretrained("shb777/PromptTuner-v0.1")
-tokenizer = AutoTokenizer.from_pretrained("shb777/PromptTuner-v0.1")
-prompt_model.eval()
-
-CSM_BASE_MODEL_ID = "sesame/csm-1b"
-CSM_ADAPTER_ID = "shb777/csm-maya-exp2"
-SPEAKER_ID = 4  # Was trained on this speaker ID
-device = "cuda" if torch.cuda.is_available() else "cpu"
-
-csm_processor = AutoProcessor.from_pretrained(CSM_BASE_MODEL_ID)
-csm_model = CsmForConditionalGeneration.from_pretrained(CSM_BASE_MODEL_ID, device_map=device)
-csm_model = PeftModel.from_pretrained(csm_model, CSM_ADAPTER_ID)
-csm_model.eval()
-
-
-def extract_key_phrases(text: str) -> list: # We will highlight key phrases in the enhanced prompt
-    phrases = []
-    try:
-        tokens = word_tokenize(text)
-        tagged = pos_tag(tokens)
-        chunks = ne_chunk(tagged)
-
-        current_phrase = []
-        for chunk in chunks:
-            if hasattr(chunk, 'label'):
-                phrase = ' '.join([token for token, _ in chunk.leaves()])
-                phrases.append(phrase.lower())
-            elif chunk[1].startswith('NN'):
-                current_phrase.append(chunk[0])
-            elif chunk[1].startswith('JJ') and current_phrase:
-                current_phrase.append(chunk[0])
-            else:
-                if current_phrase:
-                    phrases.append(' '.join(current_phrase).lower())
-                    current_phrase = []
-
-        if current_phrase:
-            phrases.append(' '.join(current_phrase).lower())
-
-        for word, tag in tagged:
-            if tag.startswith('JJ') or tag in ('RB', 'RBR', 'RBS'):
-                phrases.append(word.lower())
-
-    except Exception:
-        words = re.findall(r'\b[a-zA-Z]{3,}\b', text.lower())
-        phrases = list(set(words))
-
-    multi_word = re.findall(r'\b[a-zA-Z]{3,}(?:\s+[a-zA-Z]{3,}){1,3}\b', text)
-    phrases.extend([mw.lower() for mw in multi_word])
-
-    phrases = list(set(phrases))
-    phrases.sort(key=len, reverse=True)
-
-    return phrases[:20]
-
-
-def highlight_matches(original_input: str, enhanced_output: str) -> str:
-    if not original_input.strip():
-        return f'<p class="output-text">{enhanced_output}</p>'
-
-    key_phrases = extract_key_phrases(original_input)
-    if not key_phrases:
-        return f'<p class="output-text">{enhanced_output}</p>'
-
-    key_phrases.sort(key=len, reverse=True)
-
-    output = enhanced_output
-    highlighted_spans = []
-
-    for phrase in key_phrases:
-        pattern = re.compile(r'\b' + re.escape(phrase) + r'\b', re.IGNORECASE)
-
-        def replace_with_highlight(match):
-            matched_text = match.group(0)
-            start = match.start()
-            for h_start, h_end in highlighted_spans:
-                if start >= h_start and start <= h_end:
-                    return matched_text
-            highlighted_spans.append((start, match.end()))
-            return f'<mark class="highlight-keyword">{matched_text}</mark>'
-
-        output = pattern.sub(replace_with_highlight, output)
-
-    return f'<p class="output-text">{output}</p>'
-
-
-def enhance_prompt(user_prompt: str):
-    if not user_prompt or not user_prompt.strip():
-        yield (
-            '<span class="placeholder-text">Please enter a prompt to enhance.</span>',
-            "",
-            gr.update(interactive=True),
-            gr.update(interactive=True)
-        )
-        return
-
-    messages = [
-        {"role": "system", "content": SYSTEM_PROMPT},
-        {"role": "user", "content": user_prompt}
-    ]
-
-    prompt = tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
-    inputs = tokenizer(prompt, return_tensors="pt")
-
-    streamer = TextIteratorStreamer(tokenizer, skip_special_tokens=True, skip_prompt=True)
-    generation_kwargs = {
-        'max_new_tokens': 512,
-        'streamer': streamer,
-        'do_sample': True,
-        'temperature': 1,
-        'top_p': 0.95,
-        'top_k': 64
-    }
-
-    placeholder = '<span class="placeholder-text">Your enhanced prompt will appear here</span>'
-    yield placeholder, "", gr.update(interactive=False), gr.update(interactive=False)
-
-    thread = Thread(target=prompt_model.generate, kwargs={**inputs, **generation_kwargs})
-    thread.start()
-
-    output = ""
-    for text in streamer:
-        output += text
-        highlighted = highlight_matches(user_prompt, output)
-        yield highlighted, output, gr.update(), gr.update()
-
-    final_highlighted = highlight_matches(user_prompt, output)
-    yield final_highlighted, output, gr.update(interactive=True), gr.update(interactive=True)
+model_path = "ibm-granite/granite-vision-3.1-2b-preview"
+processor = LlavaNextProcessor.from_pretrained(model_path, use_fast=True)
+model = LlavaNextForConditionalGeneration.from_pretrained(model_path, torch_dtype="auto", device_map="auto")
 
+def get_text_from_content(content):
+    texts = []
+    for item in content:
+        if item["type"] == "text":
+            texts.append(item["text"])
+        elif item["type"] == "image":
+            texts.append("<image>")
+    return " ".join(texts)
 
 @spaces.GPU
-def generate_tts_gpu(text):
-    conversation = [
-        {"role": str(SPEAKER_ID), "content": [{"type": "text", "text": text}]},
-    ]
-
-    enc = csm_processor.apply_chat_template(
+def chat_inference(image, text, temperature, top_p, top_k, max_tokens, conversation):
+    if conversation is None:
+        conversation = []
+        
+    user_content = []
+    if image is not None:
+        user_content.append({"type": "image", "image": image})
+    if text and text.strip():
+        user_content.append({"type": "text", "text": text.strip()})
+    if not user_content:
+        return conversation_display(conversation), conversation
+
+    conversation.append({
+        "role": "user",
+        "content": user_content
+    })
+
+    inputs = processor.apply_chat_template(
         conversation,
+        add_generation_prompt=True,
         tokenize=True,
         return_dict=True,
-        return_tensors="pt",
-    ).to(device)
-
-    gen_kwargs = {
-        "max_new_tokens": 375,
-        # "do_sample": True,
-        # "temperature": 0.7,
-        # "depth_decoder_do_sample": True,
-        # "depth_decoder_temperature": 0.7,
-        # "depth_decoder_top_k": 20,
-        # "depth_decoder_top_p": 0.95,
-    }
-
-    audio = csm_model.generate(
-        **enc,
-        **gen_kwargs,
-        output_audio=True
-    )
-    audio_array = audio[0].to(torch.float32).cpu().numpy()
-    return (24000, audio_array)
-
-
-def text_to_speech(text: str):
-    if not text or not text.strip():
-        raise gr.Error("Please enter text to convert to speech.")
-
-    if len(text) > 200:
-        raise gr.Error("Text too long. Please limit to 200 characters or split into sentences.")
-
-    # Preprocess text - remove characters that CSM struggles with
-    text = text.replace('(', '').replace(')', '')
-    text = text.replace('"', '').replace('"', '').replace('"', '')
-    text = text.replace(';', ',')
-    text = text.replace('!', ' ')
-    text = text.replace('[', '').replace(']', '')
-    text = text.replace('/', ' ')
-
-    try:
-        audio_result = generate_tts_gpu(text)
-        return audio_result
-    except Exception as e:
-        raise gr.Error(f"Failed to generate speech: {str(e)}")
-
-with open("style.css", "r") as f: # Load CSS for styling
-    custom_css = f.read()
+        return_tensors="pt"
+    ).to("cuda")
 
-with gr.Blocks(css=custom_css, title="TinkerSpace") as demo:
+    torch.manual_seed(random.randint(0, 10000))
 
-    with gr.Tabs():
-        with gr.Tab("CSM Maya TTS"):
-            with gr.Row(elem_classes=["main-grid"]):
-                with gr.Column(elem_classes=["card"]):
-                    gr.HTML('<label class="form-label">Text Input</label>')
-
-                    tts_input = gr.Textbox(
-                        placeholder="Enter text to convert to speech...",
-                        lines=5,
-                        show_label=False,
-                        container=False,
-                        elem_classes=["input-textarea"]
-                    )
-
-                    with gr.Row(elem_classes=["flex gap-2 mt-6"]):
-                        generate_tts_btn = gr.Button(
-                            "Generate Speech",
-                            variant="primary",
-                            scale=2,
-                            elem_classes=["btn", "btn-primary"]
-                        )
-                        clear_tts_btn = gr.Button(
-                            "Clear",
-                            scale=1,
-                            elem_classes=["btn", "btn-secondary"]
-                        )
-
-                with gr.Column(elem_classes=["card"]):
-                    gr.HTML('<label class="form-label">Generated Audio</label>')
-
-                    tts_output = gr.Audio(
-                        label=None,
-                        show_label=False,
-                        autoplay=False,
-                        interactive=False,
-                        elem_classes=["output-container"]
-                    )
-
-            with gr.Column(elem_classes=["examples-section"]):
-                gr.Examples(
-                    examples=[
-                        ['You went to the party, even though I explicitly told you not to?'],
-                        ["With a gentle touch and a loving smile, she reassured, 'Dont worry, my love. We'll get through this together, just like we always have. I love you.'"],
-                        ["After years of work, Heisenberg finally published a ground-breaking cutting-edge research paper on quantum physics."],
-                        ['"Uh, are you sure about this?" Tim asked nervously, looking at the steep slope before them. "Whoa, it\'s higher than I thought," he continued, his voice filled with trepidation.'],
-                        ['"Shh, Lucy, shh, we mustn\'t wake your baby brother," Tom whispered, as they tiptoed past the nursery.']
-                    ],
-                    inputs=tts_input,
-                    label="Examples"
-                )
+    generation_kwargs = {
+        "max_new_tokens": max_tokens,
+        "temperature": temperature,
+        "top_p": top_p,
+        "top_k": top_k,
+        "do_sample": True,
+    }
 
+    output = model.generate(**inputs, **generation_kwargs)
+    assistant_response = processor.decode(output[0], skip_special_tokens=True)
+
+    conversation.append({
+        "role": "assistant",
+        "content": [{"type": "text", "text": assistant_response.strip()}]
+    })
+    
+    return conversation_display(conversation), conversation
+
+def conversation_display(conversation):
+    chat_history = []
+    for msg in conversation:
+        if msg["role"] == "user":
+            user_text = get_text_from_content(msg["content"])
+        elif msg["role"] == "assistant":
+            assistant_text = msg["content"][0]["text"].split("<|assistant|>")[-1].strip()
+            chat_history.append({"role": "user", "content": user_text})
+            chat_history.append({"role": "assistant", "content": assistant_text})
+    return chat_history
+
+def clear_chat():
+    return [], [], "", None
+    
+with gr.Blocks(title="Granite Vision 3.1 2B", css="h1 { overflow: hidden; }") as demo:
+    gr.Markdown("# Granite Vision 3.1 2B")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            image_input = gr.Image(type="pil", label="Upload Image (optional)")
+            with gr.Column():
+                temperature_input = gr.Slider(minimum=0.0, maximum=2.0, value=0.2, step=0.01, label="Temperature")
+                top_p_input = gr.Slider(minimum=0.0, maximum=1.0, value=0.95, step=0.01, label="Top p")
+                top_k_input = gr.Slider(minimum=0, maximum=100, value=50, step=1, label="Top k")
+                max_tokens_input = gr.Slider(minimum=10, maximum=300, value=128, step=1, label="Max Tokens")
+            
+        with gr.Column(scale=3):
+            chatbot = gr.Chatbot(label="Chat History", elem_id="chatbot", type='messages')
+            text_input = gr.Textbox(lines=2, placeholder="Enter your message here", label="Message")
             with gr.Row():
-                gr.Markdown(
-                    "Powered by [CSM Maya](https://huggingface.co/shb777/csm-maya-exp2)"
-                )
-
-        with gr.Tab("Prompt Enhancer"):
-            with gr.Row(elem_classes=["main-grid"]):
-                with gr.Column(elem_classes=["card"]):
-                    gr.HTML('<label class="form-label">Input Prompt</label>')
-
-                    input_text = gr.Textbox(
-                        placeholder="Describe your image concept... e.g., fox, red tail, blue moon, clouds",
-                        lines=5,
-                        show_label=False,
-                        autofocus=True,
-                        container=False,
-                        elem_classes=["input-textarea"]
-                    )
+                send_button = gr.Button("Chat")
+                clear_button = gr.Button("Clear Chat")
+    
 
-                    with gr.Row(elem_classes=["flex gap-2 mt-6"]):
-                        enhance_btn = gr.Button(
-                            "Enhance Prompt",
-                            variant="primary",
-                            scale=2,
-                            elem_classes=["btn", "btn-primary"]
-                        )
-                        clear_btn = gr.Button(
-                            "Clear",
-                            scale=1,
-                            elem_classes=["btn", "btn-secondary"]
-                        )
+    state = gr.State([])
 
-                with gr.Column(elem_classes=["card"]):
-                    gr.HTML('<label class="form-label">Enhanced Prompt</label>')
-
-                    output_html = gr.HTML(
-                        value='<span class="placeholder-text">Your enhanced prompt will appear here</span>',
-                        elem_classes=["output-container"]
-                    )
-
-                    raw_output = gr.Textbox(visible=False)
-
-            with gr.Column(elem_classes=["examples-section"]):
-                gr.Examples(
-                    examples=[
-                        ["fox, red tail, blue moon, clouds"],
-                        ["room with french window, cozy morning vibes, minimal"],
-                        ["anime style, sunset, japan"]
-                    ],
-                    inputs=input_text,
-                    label="Examples"
-                )
-
-            with gr.Row():
-                gr.Markdown(
-                    "Powered by [PromptTuner](https://huggingface.co/shb777/PromptTuner-v0.1), "
-                    "a finetuned gemma3-270M model specifically designed to enhance text prompts "
-                    "for text-to-image generation."
-                )
-
-    enhance_btn.click(
-        fn=enhance_prompt,
-        inputs=[input_text],
-        outputs=[output_html, raw_output, enhance_btn, clear_btn]
+    send_button.click(
+        chat_inference,
+        inputs=[image_input, text_input, temperature_input, top_p_input, top_k_input, max_tokens_input, state],
+        outputs=[chatbot, state]
     )
 
-    clear_btn.click(
-        fn=lambda: (
-            "",
-            '<span class="placeholder-text">Your enhanced prompt will appear here</span>',
-            "",
-            gr.update(interactive=True),
-            gr.update(interactive=True)
-        ),
+    clear_button.click(
+        clear_chat,
         inputs=None,
-        outputs=[input_text, output_html, raw_output, enhance_btn, clear_btn]
-    )
-
-    generate_tts_btn.click(
-        fn=text_to_speech,
-        inputs=[tts_input],
-        outputs=[tts_output]
+        outputs=[chatbot, state, text_input, image_input]
     )
 
-    clear_tts_btn.click(
-        fn=lambda: ("", None),
-        inputs=None,
-        outputs=[tts_input, tts_output]
+    gr.Examples(
+        examples=[
+            ["https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png", "What is this?"]
+        ],
+        inputs=[image_input, text_input]
     )
 
 if __name__ == "__main__":
-    demo.queue(max_size=20).launch(mcp_server=True)
+    demo.launch()

requirements.txt

@@ -1,4 +1,6 @@
-nltk
-peft
-soundfile
-transformers
+torch
+torchvision
+git+https://github.com/huggingface/transformers.git
+gradio
+accelerate
+bitsandbytes

style.css

@@ -1,222 +0,0 @@
-/* ========== CSS VARIABLES ========== */
-:root {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 4.5%;
-    --card-border: 240 3.7% 18%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --border: 240 3.7% 18%;
-    --input: 240 3.7% 18%;
-    --ring: 240 5.9% 85%;
-    --radius: 0.625rem;
-}
-
-/* ========== GLOBAL STYLES ========== */
-.gradio-container {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    background: hsl(var(--background)) !important;
-    color: hsl(var(--foreground));
-}
-
-.gradio-container mark {
-    background: hsl(var(--accent) / 0.6);
-    color: hsl(var(--accent-foreground));
-    padding: 0.15em 0.35em;
-    border-radius: calc(var(--radius) - 2px);
-    font-weight: 500;
-    border: 1px solid hsl(var(--border) / 0.5);
-}
-
-footer { display: none !important; }
-
-/* ========== MARKDOWN ========== */
-.gradio-markdown {
-    color: hsl(var(--foreground)) !important;
-    font-size: 0.9375rem !important;
-    line-height: 1.6 !important;
-}
-
-.gradio-markdown:first-child {
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid hsl(var(--border));
-}
-
-.gradio-markdown:last-child {
-    padding-top: 1.5rem;
-    border-top: 1px solid hsl(var(--border));
-    color: hsl(var(--muted-foreground)) !important;
-}
-
-.gradio-markdown a {
-    color: hsl(var(--foreground)) !important;
-    text-decoration: none;
-    border-bottom: 1px solid hsl(var(--border));
-    transition: border-color 0.2s ease;
-}
-
-.gradio-markdown a:hover {
-    border-color: hsl(var(--ring));
-}
-
-/* ========== LAYOUT ========== */
-.main-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-}
-
-@media (max-width: 768px) {
-    .main-grid { grid-template-columns: 1fr; }
-}
-
-/* ========== CARDS ========== */
-.card {
-    background: hsl(var(--card));
-    border: 1px solid hsl(var(--card-border));
-    border-radius: var(--radius);
-    padding: 1.5rem;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
-}
-
-/* ========== FORM ELEMENTS ========== */
-.form-label {
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-    display: block;
-    color: hsl(var(--foreground));
-}
-
-.input-textarea {
-    width: 100%;
-    min-height: 140px;
-    padding: 0.875rem;
-    font-size: 0.9375rem;
-    line-height: 1.6;
-    background: hsl(var(--background));
-    border: 1px solid hsl(var(--input));
-    border-radius: var(--radius);
-    color: hsl(var(--foreground));
-    transition: all 0.2s ease;
-    resize: vertical;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.input-textarea::placeholder {
-    color: hsl(var(--muted-foreground) / 0.7);
-}
-
-.input-textarea:focus {
-    outline: none;
-    border-color: hsl(var(--ring));
-    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
-    background: hsl(var(--background) / 0.8);
-}
-
-/* ========== BUTTONS ========== */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    font-size: 0.9375rem;
-    font-weight: 500;
-    padding: 0.625rem 1.25rem;
-    border-radius: var(--radius);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-}
-
-.btn:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
-}
-
-.btn-primary {
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
-}
-
-.btn-primary:hover {
-    opacity: 0.95;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
-}
-
-.btn-primary:active {
-    transform: translateY(1px);
-}
-
-.btn-primary:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.btn-secondary {
-    background: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-    border: 1px solid hsl(var(--border));
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.btn-secondary:hover {
-    background: hsl(var(--secondary) / 0.8);
-    border-color: hsl(var(--muted-foreground) / 0.5);
-}
-
-.btn-secondary:active {
-    transform: translateY(1px);
-}
-
-/* ========== OUTPUT CONTAINER ========== */
-.output-container {
-    min-height: 140px;
-    padding: 0.875rem;
-    border: 1px solid hsl(var(--input));
-    border-radius: var(--radius);
-    background: hsl(var(--background));
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
-}
-
-.output-text {
-    color: hsl(var(--foreground));
-    font-size: 0.9375rem;
-    line-height: 1.75;
-    margin: 0;
-}
-
-.placeholder-text {
-    color: hsl(var(--muted-foreground));
-}
-
-.highlight-keyword {
-    background: hsl(var(--accent) / 0.6);
-    color: hsl(var(--accent-foreground));
-    padding: 0.15em 0.35em;
-    border-radius: calc(var(--radius) - 2px);
-    font-weight: 500;
-    border: 1px solid hsl(var(--border) / 0.5);
-}
-
-/* ========== EXAMPLES ========== */
-.examples-section {
-    padding: 1.5rem;
-    background: hsl(var(--card));
-    border: 1px solid hsl(var(--card-border));
-    border-radius: var(--radius);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
-}
-
-/* ========== SPACING UTILITIES ========== */
-.mt-6 { margin-top: 1.5rem; }
-.flex { display: flex; }
-.gap-2 { gap: 0.5rem; }