Basic working version with only Hackclub AI support, starting UI and offensive mode(convince to get into debt)

templates/index.jinja2

@@ -0,0 +1,70 @@
+{% extends "base.jinja2" %}
+
+{% block title %}Debt by AI{% endblock %}
+
+{% block body %}
+<div class="border container position-absolute top-50 start-50 translate-middle">
+    <h1>Debt by AI</h1>
+
+    <div id="scenario-label" class="mt-3">
+Scenario: Loading...
+    </div>
+    <div id="debt-label" class="mb-3">
+Debt amount to convince: Loading...
+    </div>
+
+    <div id="chat" class="border container mt-3 mb-3">
+        <div class="border container mt-3 mb-3">I am {{ name }}, the AI. Convince me to accept the situation and get me into debt :)</div>
+    </div>
+
+    <div class="form-floating mb-3" action="">
+        <input class="form-control" id="messageinput" placeholder="Send message...">
+        <label for="messageinput">Your message</label>
+    </div>
+
+</div>
+
+<script type="text/javascript">
+    async function generate_scenario() {
+        const response = await fetch("/generate_scenario");
+        const data = await response.json(); 
+
+        document.getElementById("scenario-label").textContent = `Scenario: ${DOMPurify.sanitize(data["scenario"])}`;
+        document.getElementById("debt-label").textContent = `Debt amount to convince: ${DOMPurify.sanitize(data["debt_amount"])}$`;
+    }
+    
+    document.getElementById("messageinput").addEventListener('change', async function(event) {
+        const value = document.getElementById("messageinput").value;
+        document.getElementById('chat').innerHTML += `<div class="border container mt-3 mb-3">${DOMPurify.sanitize(value)}</div>`
+
+        const response = await fetch("/get_answer", {
+            method: 'POST',
+            
+            headers: {
+                'Content-Type': 'application/json'
+            },
+
+            body: JSON.stringify({
+                "user_input": value,
+                "scenario": document.getElementById('scenario-label').textContent.replace('Scenario: ', '')
+            })
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            return response.json(); 
+        })
+        .then(data => {
+            document.getElementById('chat').innerHTML += `<div class="border container mt-3 mb-3">${DOMPurify.sanitize(data["story"])}` + '<br><br>Evaluation:<br>Convinced: ' + DOMPurify.sanitize(data["convinced"]) + '<br>Final Debt Amount: ' + DOMPurify.sanitize(data['final_debt_amount']) + '$</div>'
+        })
+        .catch(error => {
+            console.error('Error sending data:', error);
+        });
+    })
+
+    window.addEventListener('load', generate_scenario);
+</script>
+
+{% endblock %}