app.py

"""Token Playground - Compare tokenizers and calculate costs"""
import gradio as gr
import sys, os
sys.path.append(os.path.join(os.path.dirname(__file__), '..'))
from shared.components import create_premium_hero, create_footer
from shared.utils import estimate_tokens, calculate_cost

TOKENIZERS = {
    "GPT-4": lambda text: len(text.split()) * 1.3,
    "Claude": lambda text: len(text.split()) * 1.2,
    "Llama": lambda text: len(text.split()) * 1.4,
}

def analyze_text(text):
    results = []
    for model, tokenizer in TOKENIZERS.items():
        tokens = int(tokenizer(text))
        cost = calculate_cost(tokens, model.lower() if "gpt" in model.lower() else "claude-3-sonnet")
        results.append(
            f"""
<div style="
    padding: 1rem 1.1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: rgba(255,255,255,0.92);
    margin-bottom: 0.75rem;
    box-shadow: 0 8px 24px rgba(31,41,55,0.08);
">
  <div style="display:flex; justify-content:space-between; gap:1rem; align-items:center;">
    <strong style="color:#1f2937;">{model}</strong>
    <span style="color:#e8935c; font-weight:800;">${cost:.4f}</span>
  </div>
  <div style="margin-top:0.4rem; color:#4b5563;">Estimated tokens: <strong>{tokens}</strong></div>
</div>
"""
        )
    return "".join(results)


custom_css = """
.token-panel {
    background: rgba(255,255,255,0.9);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(31,41,55,0.08);
}
"""

with gr.Blocks(css=custom_css, title="Token Playground", theme=gr.themes.Soft()) as app:
    create_premium_hero(
        "Token Playground",
        "See token counts before you ship. Compare rough usage and cost across popular model families in one fast, elegant panel.",
        "🎮",
        badge="Model Economics",
        highlights=["Token estimates", "Cost comparison", "Fast text analysis"],
    )
    with gr.Row():
        with gr.Column(scale=1):
            text_input = gr.Textbox(
                label="Enter text",
                lines=8,
                placeholder="Write a prompt, email, README snippet, or customer support reply..."
            )
            analyze_btn = gr.Button("Analyze", variant="primary")
        with gr.Column(scale=1):
            output = gr.Markdown(elem_classes=["token-panel"])
    analyze_btn.click(analyze_text, text_input, output)
    create_footer("Token Playground")

if __name__ == "__main__":
    app.launch(server_name="0.0.0.0", server_port=7860)