// Set up the HTML content
document.body.innerHTML = `
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }
        #prompt {
            width: 80%;
            padding: 10px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
        }
        #output {
            margin-top: 20px;
            font-size: 16px;
            white-space: pre-wrap;
            text-align: left;
            width: 80%;
            margin: 20px auto;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
    <h1>AI Chain Interaction</h1>
    <p>Enter a prompt to start the AI chain interaction:</p>
    <input id="prompt" type="text" placeholder="Type your question here..." />
    <br />
    <button onclick="startAIChain()">Send</button>
    <div id="output"></div>
`;

// Function to query the Hugging Face API
async function query(data, modelEndpoint) {
    try {
        const response = await fetch(
            modelEndpoint, // API endpoint for the model
            {
                headers: {
                    Authorization: "Bearer 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", // Replace with your API key
                    "Content-Type": "application/json",
                },
                method: "POST",
                body: JSON.stringify(data),
            }
        );

        if (!response.ok) {
            const errorText = await response.text();
            console.error("Error Body:", errorText);
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const responseBody = await response.json();
        console.log("Response Body:", responseBody);
        return responseBody;
    } catch (error) {
        console.error("Error in query function:", error);
        throw error;
    }
}

// Function to handle the AI chain
async function startAIChain() {
    const prompt = document.getElementById("prompt").value;
    const outputDiv = document.getElementById("output");

    // Clear previous results
    outputDiv.innerHTML = "Thinking...";

    try {
        // Query the first AI
        const ai1Response = await query(
            { inputs: prompt },
            "https://api-inference.huggingface.co/models/HuggingFaceH4/starchat-beta" // AI1 endpoint
        );

        const ai1Output = ai1Response[0]?.generated_text || "No response from AI1.";
        outputDiv.innerHTML = `AI1 Response: ${ai1Output}\n\nSending to AI2...`;

        // Query the second AI using AI1's response as input (Chocolatine-14B-Instruct-DPO-v1.2)
        const ai2Response = await query(
            { inputs: ai1Output },
            "https://api-inference.huggingface.co/models/HuggingFaceH4/starchat-beta" // AI2 endpoint
        );

        const ai2Output = ai2Response[0]?.generated_text || "No response from AI2.";
        outputDiv.innerHTML = `AI1 Response: ${ai1Output}\n\nAI2 Response: ${ai2Output}`;
    } catch (error) {
        console.error("Error in AI chain:", error);
        outputDiv.innerHTML = "Error occurred during AI interaction. Please try again.";
    }
}