AAAAAAAAA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Narrative Persona Creator</title>
<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
/* Custom SCSS Variables */
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--success-color: #198754;
--bg-light: #f8f9fa;
--text-dark: #212529;
}
/* Custom Styles */
body {
background-color: var(--bg-light);
color: var(--text-dark);
}
.hero-section {
background: linear-gradient(rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.05));
padding: 4rem 0;
}
.card {
border: none;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.form-label {
font-weight: 500;
margin-bottom: 0.5rem;
}
.preview-section {
display: none;
}
.preview-section.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.btn-create {
background-color: var(--primary-color);
border: none;
padding: 0.75rem 2rem;
font-weight: 500;
}
.persona-image {
max-width: 150px;
border-radius: 8px;
}
.footer {
background-color: var(--bg-light);
padding: 2rem 0;
margin-top: 4rem;
}
</style>
</head>
<body>
<!-- Hero Section -->
<header class="hero-section text-center">
<div class="container">
<h1 class="display-4 mb-3">Create Your Narrative Persona</h1>
<p class="lead text-muted">Bring your character to life and chat with them!</p>
</div>
</header>
<!-- Main Content -->
<main class="container py-5">
<div class="row g-4">
<!-- Form Section -->
<div class="col-lg-6">
<div class="card p-4">
<h2 class="h4 mb-4">Character Details</h2>
<form id="personaForm">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="slug" class="form-label">Slug</label>
<input type="text" class="form-control" id="slug" name="slug" required>
</div>
<div class="mb-3">
<label for="image" class="form-label">Image URL</label>
<input type="url" class="form-control" id="image" name="image" placeholder="Optional">
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" id="description" name="description" rows="4" required></textarea>
</div>
<div class="mb-3">
<label for="welcome_message" class="form-label">Welcome Message</label>
<textarea class="form-control" id="welcome_message" name="welcome_message" rows="3" required></textarea>
</div>
<div class="mb-3">
<label for="expert" class="form-label">Expertise</label>
<input type="text" class="form-control" id="expert" name="expert" placeholder="What are they good at?">
</div>
<div class="mb-3">
<label for="prompt" class="form-label">Prompt</label>
<textarea class="form-control" id="prompt" name="prompt" rows="3" required></textarea>
</div>
<div class="mb-3">
<label for="temperature" class="form-label">Temperature</label>
<input type="number" class="form-control" id="temperature" name="temperature" step="0.1" placeholder="e.g. 0.7">
</div>
<div class="mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="filter_badwords" name="filter_badwords">
<label class="form-check-label" for="filter_badwords">
Filter bad words
</label>
</div>
</div>
<button type="submit" class="btn btn-create btn-primary w-100">Create Persona</button>
</form>
</div>
</div>
<!-- Preview Section -->
<div class="col-lg-6">
<div class="card p-4 preview-section" id="previewSection">
<h2 class="h4 mb-4">Your Created Persona</h2>
<div class="persona-preview">
<h3 id="displayName" class="h5 mb-3"></h3>
<img id="displayImage" class="persona-image mb-3 d-none" alt="Persona Image">
<div class="mb-3">
<h4 class="h6">Description</h4>
<p id="displayDescription" class="text-muted"></p>
</div>
<div class="mb-3">
<h4 class="h6">Welcome Message</h4>
<p id="displayWelcomeMessage" class="text-muted"></p>
</div>
<div class="mb-3">
<h4 class="h6">Expertise</h4>
<p id="displayExpert" class="text-muted"></p>
</div>
<div class="mb-3">
<h4 class="h6">Prompt</h4>
<p id="displayPrompt" class="text-muted"></p>
</div>
<div class="mb-3">
<h4 class="h6">Temperature</h4>
<p id="displayTemperature" class="text-muted"></p>
</div>
<div class="mb-3">
<h4 class="h6">Filter Bad Words</h4>
<p id="displayFilterBadWords" class="text-muted"></p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<p class="text-muted mb-0">© 2024 Narrative Persona Creator. All Rights Reserved.</p>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script>
document.getElementById('personaForm').addEventListener('submit', function(event) {
event.preventDefault();
// Retrieve form values
const formData = new FormData(this);
const data = Object.fromEntries(formData);
// Update preview section
document.getElementById('displayName').textContent = data.name;
const displayImage = document.getElementById('displayImage');
if (data.image) {
displayImage.src = data.image;
displayImage.classList.remove('d-none');
} else {
displayImage.classList.add('d-none');
}
document.getElementById('displayDescription').textContent = data.description;
document.getElementById('displayWelcomeMessage').textContent = data.welcome_message;
document.getElementById('displayExpert').textContent = data.expert || 'N/A';
document.getElementById('displayPrompt').textContent = data.prompt;
document.getElementById('displayTemperature').textContent = data.temperature || 'N/A';
document.getElementById('displayFilterBadWords').textContent = data.filter_badwords ? 'Yes' : 'No';
// Show preview section
document.getElementById('previewSection').classList.add('active');
});
</script>
</body>
</html>