mirror of
https://github.com/csd4ni3l/debt-by-ai.git
synced 2026-01-01 12:33:44 +01:00
Add login/register system and database and also offensive mode.
This commit is contained in:
csd4ni3l
@@ -9,6 +9,22 @@
|
||||
{% block head %} {% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">Debt by AI</a>
|
||||
|
||||
<button class="navbar-toggler" type="button", data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse", id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
{% block nav %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script>
|
||||
|
||||
@@ -2,69 +2,18 @@
|
||||
|
||||
{% block title %}Debt by AI{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/offensive">Offensive Mode</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/leaderboard">Leaderboard</a>
|
||||
</li>
|
||||
{% 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 %}
|
||||
TBD
|
||||
{% endblock%}
|
||||
19
templates/leaderboard.jinja2
Normal file
19
templates/leaderboard.jinja2
Normal file
@@ -0,0 +1,19 @@
|
||||
{% extends "base.jinja2" %}
|
||||
|
||||
{% block title %}Debt by AI Leaderboard{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/offensive">Offensive Mode</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/leaderboard">Leaderboard</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
TBD
|
||||
{% endblock%}
|
||||
34
templates/login.jinja2
Normal file
34
templates/login.jinja2
Normal file
@@ -0,0 +1,34 @@
|
||||
{% extends "base.jinja2" %}
|
||||
|
||||
{% block title %}Debt by AI Login{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/login">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/register">Register</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 75vh;">
|
||||
<div class="bg-white rounded rounded-5 border border-5 border-white p-4">
|
||||
<h2>Login</h2>
|
||||
<form target="/login", method="post">
|
||||
<div class="form-group" style="margin-top: 4%;">
|
||||
<label for="usernameinput">Username</label>
|
||||
<input name="username" class="form-control" id="usernameinput" placeholder="Enter username...">
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 4%;">
|
||||
<label for="passwordinput">Password</label>
|
||||
<input type="password" name="password" class="form-control" id="passwordinput" placeholder="Enter password...">
|
||||
</div>
|
||||
<button id="submit" type="submit" class="btn btn-primary mx-auto d-block" style="width: 100%; margin-top: 4%;">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
146
templates/offensive.jinja2
Normal file
146
templates/offensive.jinja2
Normal file
@@ -0,0 +1,146 @@
|
||||
{% extends "base.jinja2" %}
|
||||
|
||||
{% block title %}Debt by AI: Offensive Mode{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/offensive">Offensive Mode</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/leaderboard">Leaderboard</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container my-5" style="max-width: 750px;">
|
||||
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h3 class="my-0">Game Scenario</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="scenario-label" class="mb-2 lead">
|
||||
<strong>Scenario:</strong> Loading...
|
||||
</div>
|
||||
<div id="debt-label">
|
||||
<strong>Debt Target:</strong> Loading...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header">
|
||||
<h5 class="my-0">AI Debt Negotiation Chat</h5>
|
||||
</div>
|
||||
<div id="chat-body" class="card-body" style="height: 400px; overflow-y: auto;">
|
||||
<div class="d-flex justify-content-start mb-3">
|
||||
<div class="p-2 rounded bg-light border" style="max-width: 80%;">
|
||||
<strong>AI ({{ ai_name }}):</strong> I am {{ ai_name }}, the AI. Convince me to accept the situation and get me into debt :)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="message-form" class="form-floating">
|
||||
<input class="form-control" id="messageinput" placeholder="Send message...">
|
||||
<label for="messageinput">Your message</label>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
const chatBody = document.getElementById('chat-body');
|
||||
|
||||
function scrollToBottom() {
|
||||
chatBody.scrollTop = chatBody.scrollHeight;
|
||||
}
|
||||
|
||||
function appendMessage(sender, text, type) {
|
||||
let alignmentClass = 'justify-content-start';
|
||||
let backgroundClass = 'bg-light border';
|
||||
let senderTag = `<strong>${sender}:</strong>`;
|
||||
|
||||
if (sender === 'You') {
|
||||
alignmentClass = 'justify-content-end';
|
||||
backgroundClass = 'bg-primary text-white';
|
||||
senderTag = '';
|
||||
} else if (sender === 'Narrator') {
|
||||
backgroundClass = 'bg-warning-subtle border-warning border';
|
||||
}
|
||||
|
||||
const messageHTML = `
|
||||
<div class="d-flex ${alignmentClass} mb-3">
|
||||
<div class="p-2 rounded ${backgroundClass}" style="max-width: 80%;">
|
||||
${senderTag} ${DOMPurify.sanitize(text)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
chatBody.innerHTML += messageHTML;
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
async function generate_offensive_scenario() {
|
||||
const response = await fetch("/offensive_scenario");
|
||||
const data = await response.json();
|
||||
|
||||
document.getElementById("scenario-label").innerHTML = `<strong>Scenario:</strong> ${DOMPurify.sanitize(data["scenario"])}`;
|
||||
document.getElementById("debt-label").innerHTML = `<strong>Debt Target:</strong> ${DOMPurify.sanitize(data["debt_amount"])}$`;
|
||||
}
|
||||
|
||||
document.getElementById("message-form").addEventListener('submit', async function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const messageInput = document.getElementById("messageinput");
|
||||
const value = messageInput.value.trim();
|
||||
|
||||
if (!value) return;
|
||||
|
||||
appendMessage('You', value, 'user');
|
||||
|
||||
messageInput.disabled = true;
|
||||
messageInput.value = "";
|
||||
|
||||
try {
|
||||
const response = await fetch("/offensive_answer", {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
"user_input": value,
|
||||
"scenario": document.getElementById('scenario-label').textContent.replace('Scenario: ', '').replace('Scenario:', '').trim()
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const convinced = "No";
|
||||
|
||||
if (data["convinced"]) {
|
||||
const convinced = "Yes";
|
||||
}
|
||||
|
||||
const narratorText = `
|
||||
${DOMPurify.sanitize(data["story"])}
|
||||
<hr class="my-2">
|
||||
<strong>Evaluation:</strong><br>
|
||||
Convinced: <strong>${convinced}</strong><br>
|
||||
Final Debt Amount: <strong>${DOMPurify.sanitize(data['final_debt_amount'])}</strong>$
|
||||
`;
|
||||
appendMessage('Narrator', narratorText, 'narrator');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error sending data:', error);
|
||||
appendMessage('System', 'Error communicating with AI. Please try again.', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load', generate_offensive_scenario);
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
36
templates/register.jinja2
Normal file
36
templates/register.jinja2
Normal file
@@ -0,0 +1,36 @@
|
||||
{% extends "base.jinja2" %}
|
||||
|
||||
{% block title %}Debt by AI Register{% endblock %}
|
||||
|
||||
{% block nav %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/login">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/register">Register</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 75vh;">
|
||||
<div class="bg-white rounded rounded-5 border border-5 border-white p-4">
|
||||
<form action="/register" method="post">
|
||||
<h2>Register</h2>
|
||||
<div class="form-group" style="margin-top: 4%;">
|
||||
<label for="usernameinput">Username</label>
|
||||
<input name="username" class="form-control" id="usernameinput" placeholder="Enter username">
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 4%;">
|
||||
<label for="passwordinput">Password</label>
|
||||
<input type="password" name="password" class="form-control" id="passwordinput" placeholder="Enter password">
|
||||
</div>
|
||||
|
||||
<button id="submit" type="submit" class="btn btn-primary mx-auto d-block" style="width: 100%; margin-top: 4%;">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user