src/routes/+page.svelte

<script>
    // 1. Import the Client class from the Gradio client library
    import { Client } from "@gradio/client";
    const HF_TOKEN = import.meta.env.VITE_HF_ACCESS_TOKEN;
    const SPACE_ID = "Hanzo03/gradioapp";
    const PREDICT_ENDPOINT = "/process_text";

    let inputText = "";
    let result = "Submit a prompt to see the result...";
    let isLoading = false;
    let client = null;

    // Function to initialize the Gradio Client connection
    async function initializeClient() {
        if (!HF_TOKEN) {
            result = "ERROR: Hugging Face Token not configured.";
            return;
        }

        try {
            client = await Client.connect(SPACE_ID, { token: HF_TOKEN });
            console.log("Gradio Client connected successfully!");
        } catch (error) {
            console.error("Failed to connect to Gradio Client:", error);
            result = `Connection Error: Failed to connect to ${SPACE_ID}. Check your token and space ID.`;
            client = null;
        }
    }

    // Call initialization function on component load
    initializeClient();

    async function handleSubmit() {
        if (!inputText.trim()) {
            result = "Please enter some text.";
            return;
        }
        if (!client) {
             result = "Error: Gradio Client not initialized. Check console for connection errors.";
             return;
        }

        isLoading = true;
        result = "Processing...";

        try {
            const response = await client.predict(PREDICT_ENDPOINT, [
                inputText // The Gradio input component value
            ]);

            result = response.data[0];

        } catch (error) {
            console.error("Gradio API Prediction Error:", error);
            result = `API Prediction Error: ${error.message}`;
        } finally {
            isLoading = false;
        }
    }
</script>

<main>
    <h1>Svelte App ➡️ Gradio Client API</h1>

    <form on:submit|preventDefault={handleSubmit}>
        <label for="input-text">Input Prompt:</label>
        <textarea id="input-text" bind:value={inputText} disabled={isLoading || !client}></textarea>
        
        <button type="submit" disabled={isLoading || !client}>
            {#if isLoading}
                Sending...
            {:else if !client}
                Connecting...
            {:else}
                Process Text
            {/if}
        </button>
    </form>

    <div class="result-box">
        <h2>API Result</h2>
        <p>{result}</p>
    </div>
</main>

<style>
    /* Tailwind CSS not used in original, keeping original Svelte style */
    main { max-width: 600px; margin: 40px auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; font-family: sans-serif; }
    textarea { width: 100%; min-height: 100px; margin-bottom: 20px; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;}
    label { display: block; margin-bottom: 5px; font-weight: bold;}
    button { 
        padding: 10px 15px; 
        background-color: #007bff; 
        color: white; 
        border: none; 
        border-radius: 4px; 
        cursor: pointer; 
        transition: background-color 0.3s;
    }
    button:hover:not(:disabled) {
        background-color: #0056b3;
    }
    button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }
    .result-box { margin-top: 30px; padding: 15px; border: 1px dashed #007bff; background-color: #f0f8ff; border-radius: 4px; }
    h1 { font-size: 1.5rem; margin-bottom: 20px; color: #333; }
</style>