import gradio as gr

tools = [
    {
        "name": "ChatGPT (OpenAI)",
        "url": "https://chat.openai.com/",
        "steps": [
            "Step 1: Open ChatGPT website: https://chat.openai.com/",
            "Step 2: Create or login to your OpenAI account.",
            "Step 3: Choose Chat mode for conversation or code writing.",
            "Step 4: Type your question, essay, or coding task.",
            "Step 5: Copy the generated answer or download it if needed."
        ]
    },
    {
        "name": "Claude (Anthropic)",
        "url": "https://www.anthropic.com/",
        "steps": [
            "Step 1: Visit Claude via: https://www.anthropic.com/",
            "Step 2: Login or sign up for access.",
            "Step 3: Type your detailed query (essay, summary, reasoning).",
            "Step 4: Review Claude's detailed and ethical response.",
            "Step 5: Copy, edit, or reuse the generated content."
        ]
    },
    {
        "name": "Google Gemini",
        "url": "https://gemini.google.com/",
        "steps": [
            "Step 1: Go to Gemini: https://gemini.google.com/",
            "Step 2: Sign in with your Google account.",
            "Step 3: Select Text or Multimodal input option.",
            "Step 4: Enter your question, image prompt, or code.",
            "Step 5: Review Google's AI-generated answer or image."
        ]
    },
    {
        "name": "Perplexity AI",
        "url": "https://www.perplexity.ai/",
        "steps": [
            "Step 1: Visit: https://www.perplexity.ai/",
            "Step 2: No login required for basic use.",
            "Step 3: Enter your search question or topic.",
            "Step 4: Get cited, real-time web answers.",
            "Step 5: Click source links for original references."
        ]
    },
    {
        "name": "MidJourney",
        "url": "https://www.midjourney.com/",
        "steps": [
            "Step 1: Join the MidJourney Discord server: https://www.midjourney.com/",
            "Step 2: Go to a bot channel like #newbies.",
            "Step 3: Type your text prompt starting with /imagine.",
            "Step 4: Wait for AI to generate 4 image options.",
            "Step 5: Upscale or create variations of your favorite image."
        ]
    },
    {
        "name": "Runway ML",
        "url": "https://runwayml.com/",
        "steps": [
            "Step 1: Open https://runwayml.com/",
            "Step 2: Create an account or log in.",
            "Step 3: Choose an AI model (like Gen-2 for videos).",
            "Step 4: Upload your input (image/video/text).",
            "Step 5: Click generate and download your AI-edited output."
        ]
    },
    {
        "name": "Jasper AI",
        "url": "https://www.jasper.ai/",
        "steps": [
            "Step 1: Visit: https://www.jasper.ai/",
            "Step 2: Sign up or log in.",
            "Step 3: Choose the content type (blog, ad, email).",
            "Step 4: Fill in brief details like topic, tone, and audience.",
            "Step 5: Generate, edit, and export your marketing content."
        ]
    },
    {
        "name": "Synthesia",
        "url": "https://www.synthesia.io/",
        "steps": [
            "Step 1: Go to: https://www.synthesia.io/",
            "Step 2: Create an account and choose a template.",
            "Step 3: Type your script text.",
            "Step 4: Choose an AI avatar and voice.",
            "Step 5: Generate and download your AI video."
        ]
    },
    {
        "name": "Grammarly",
        "url": "https://www.grammarly.com/",
        "steps": [
            "Step 1: Visit: https://www.grammarly.com/",
            "Step 2: Install Grammarly extension or use online editor.",
            "Step 3: Paste your text content (emails, articles, etc.).",
            "Step 4: Review grammar, tone, and clarity suggestions.",
            "Step 5: Apply corrections and copy the improved text."
        ]
    },
    {
        "name": "ElevenLabs",
        "url": "https://elevenlabs.io/",
        "steps": [
            "Step 1: Open: https://elevenlabs.io/",
            "Step 2: Sign up or log in to ElevenLabs platform.",
            "Step 3: Type your script or upload text file.",
            "Step 4: Select voice style, language, and settings.",
            "Step 5: Generate, listen, and download your AI voiceover."
        ]
    }
]

def show_steps():
    html = "<h1 style='color:#0066cc;'>Top 10 AI Tools - Step-by-Step Usage</h1>"
    for tool in tools:
        html += f"<h2>{tool['name']}</h2><ul>"
        for step in tool["steps"]:
            html += f"<li>{step}</li>"
        html += f"</ul><a href='{tool['url']}' target='_blank' style='display:inline-block; margin-bottom:10px; padding:8px 12px; background-color:#28a745; color:white; border-radius:5px; text-decoration:none;'>Visit Website</a><hr>"
    return html

gr.Interface(fn=show_steps, inputs=None, outputs=gr.HTML(), title="AI Tools Stepwise Guide 2025").launch()