<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</head>
<body class="bg-light">
<!-- <div class="container py-5">
<div id="signup" class="mb-5">
<h2>Signup</h2>
<form id="signup-form">
<div class="mb-3">
<label for="signup-username" class="form-label">Username:</label>
<input type="text" id="signup-username" class="form-control" required>
</div>
<div class="mb-3">
<label for="signup-password" class="form-label">Password:</label>
<input type="password" id="signup-password" class="form-control" required>
</div>
<button type="submit" class="btn btn-dark">Signup</button>
</form>
</div>
<div id="login" class="mb-5">
<h2>Login</h2>
<form id="login-form">
<div class="mb-3">
<label for="login-username" class="form-label">Username:</label>
<input type="text" id="login-username" class="form-control" required>
</div>
<div class="mb-3">
<label for="login-password" class="form-label">Password:</label>
<input type="password" id="login-password" class="form-control" required>
</div>
<button type="submit" class="btn btn-dark">Login</button>
</form>
</div> -->
<div id="main-form-container" style="display:block">
<h2>API Request</h2>
<form id="main-form">
<div class="mb-3">
<label for="image" class="form-label">Image:</label>
<input type="file" id="image" class="form-control" accept="image/*" required>
</div>
<div class="mb-3">
<label for="text" class="form-label">Text:</label>
<input type="text" id="text" class="form-control" required>
</div>
<div class="mb-3">
<label for="blocks" class="form-label">Blocks (comma-separated):</label>
<input type="text" id="blocks" class="form-control" required>
</div>
<button type="submit" class="btn btn-dark">Submit</button>
</form>
</div>
</div>
<script>
// async function signup(username, password) {
// const response = await fetch("http://localhost:5000/signup", {
// method: "POST",
// headers: {
// "Content-Type": "application/x-www-form-urlencoded",
// },
// body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
// mode: "cors", // Adding this line to explicitly enable CORS
// });
// return response;
// }
// async function login(username, password) {
// const response = await fetch("http://localhost:5000/login", {
// method: "POST",
// headers: {
// "Content-Type": "application/x-www-form-urlencoded",
// },
// body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
// credentials: "include",
// mode: "cors", // Adding this line to explicitly enable CORS
// });
// return response;
// }
// // Signup form
// document.getElementById("signup-form").addEventListener("submit", async (event) => {
// event.preventDefault();
// const username = document.getElementById("signup-username").value;
// const password = document.getElementById("signup-password").value;
// await signup(username, password);
// alert("Signup successful!");
// });
// // Login form
// document.getElementById("login-form").addEventListener("submit", async (event) => {
// event.preventDefault();
// const username = document.getElementById("login-username").value;
// const password = document.getElementById("login-password").value;
// const response = await login(username, password);
// if (response.ok) {
// alert("Login successful!");
// document.getElementById("signup").style.display = "none";
// document.getElementById("login").style.display = "none";
// document.getElementById("main-form-container").style.display = "block";
// } else {
// alert("Login failed. Please check your credentials and try again.");
// }
// });
// Main form
document.getElementById("main-form").addEventListener("submit", async (event) => {
event.preventDefault();
const imageFile = document.getElementById("image").files[0];
const text = document.getElementById("text").value;
const blocks = document.getElementById("blocks").value.split(",").map(block => block.trim());
const formData = new FormData();
formData.append("image", imageFile);
formData.append("text", text);
blocks.forEach(block => formData.append("blocks", block));
const response = await fetch("http://localhost:5000/api", {
method: "POST",
body: formData,
credentials: "include",
mode: "no-cors",
});
if (response.ok) {
alert("Request succeeded.");
} else {
alert("Request failed.");
}
});
</script>
</body>
</html>