48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<h1 class="mb-4">Cipher Shield: Image Generation</h1>
|
|
<p class="lead text-muted mb-5">Unleash your creativity. Describe the image you want to create, and let our AI bring it to life.</p>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<form id="image-form" method="post">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<textarea class="form-control" id="prompt" name="prompt" rows="3" placeholder="e.g., A futuristic cityscape at sunset, with flying cars and neon lights"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-lg">Generate Image</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="image-result" class="mt-5">
|
|
<div id="loading-spinner" class="spinner-border text-primary" role="status" style="display: none;">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
{% if image_url %}
|
|
<h3 class="mb-4">Your Masterpiece</h3>
|
|
<img id="generated-image" class="img-fluid rounded shadow" src="{{ image_url }}" alt="Generated Image">
|
|
{% endif %}
|
|
{% if error_message %}
|
|
<div id="error-message" class="alert alert-danger mt-3">
|
|
{{ error_message }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('image-form').addEventListener('submit', function() {
|
|
document.getElementById('loading-spinner').style.display = 'block';
|
|
});
|
|
</script>
|
|
{% endblock %}
|