0xalivecow/senju
1
0
Fork 0
mirror of https://github.com/senju1337/senju.git synced 2025-12-24 07:39:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: adds a site for uploading images and generating haikus

Browse source 
Refs: OPS-55
This commit is contained in:
0xjrx 2025-03-07 16:00:41 +01:00
parent f2c01926da
commit 34b52b8866
No known key found for this signature in database
GPG key ID: 61C53033867D0271
3 changed files with 119 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
senju/main.py
View file

@ -45,3 +45,10 @@ def prompt_view():
"prompt.html",
title="Haiku generation"
)
@app.route("/scan")
def scan_view():
return render_template(
"scan.html",
title="Image scanning"
)

5
senju/templates/base.html
View file

@ -43,6 +43,11 @@
{% if request.endpoint == 'prompt_view' %} bg-gray-900 text-white {% else %} text-gray-300 hover:bg-gray-700 hover:text-white {% endif %}">
Haiku generation
</a>
<a href="{{ url_for('scan_view') }}"
class="rounded-md px-3 py-2 text-sm font-medium
{% if request.endpoint == 'scan_view' %} bg-gray-900 text-white {% else %} text-gray-300 hover:bg-gray-700 hover:text-white {% endif %}">
Image scanning
</a>
<a href="#"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">
Information

107
senju/templates/scan.html Normal file
View file

@ -0,0 +1,107 @@
{% extends "base.html" %}
{% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Upload with Preview</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center min-h-screen bg-violet-900 text-white p-6">
<div class="bg-white text-gray-900 p-8 rounded-xl shadow-lg max-w-lg w-full text-center transform transition duration-300 hover:scale-105 mb-8">
<h1 class="text-3xl font-bold text-violet-700 mb-4">Upload your image</h1>
<!-- File upload container -->
<div id="upload-area" class="flex items-center justify-center w-full">
<label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
</svg>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
<p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
</div>
<input id="dropzone-file" type="file" accept="image/*" class="hidden" />
</label>
</div>
<!-- Image Preview container -->
<div id="image-preview" class="w-full hidden">
<div class="relative">
<img id="preview-img" src="" alt="Preview" class="w-full h-auto rounded-lg">
<button id="remove-image" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600" title="Remove image">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<button id="submit-button" type="submit" class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded transition duration-300">
Submit
</button>
</div>
<div id="response-box" class="mt-8 bg-white text-gray-900 p-6 rounded-lg shadow-lg max-w-lg w-full text-center opacity-0 transition-opacity duration-500 ease-in-out">
<h2 class="text-2xl font-semibold text-violet-700">Response:</h2>
<p id="ai-response" class="text-lg text-gray-700 mt-2 italic">Waiting for input...</p>
</div>
</div>
<script>
// Get all needed elements
const dropzoneFile = document.getElementById('dropzone-file');
const uploadArea = document.getElementById('upload-area');
const imagePreview = document.getElementById('image-preview');
const previewImg = document.getElementById('preview-img');
const removeImageBtn = document.getElementById('remove-image');
const responseBox = document.getElementById('response-box');
const submitButton = document.getElementById('submit-button');
function handleFileSelect(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
// Create a URL for selected image
const imageUrl = URL.createObjectURL(file);
// Set the image source
previewImg.src = imageUrl;
// Hide upload area and show image preview
uploadArea.classList.add('hidden');
imagePreview.classList.remove('hidden');
}
}
function removeImage() {
dropzoneFile.value = '';
// Hide image
imagePreview.classList.add('hidden');
uploadArea.classList.remove('hidden');
// Revoke the object
URL.revokeObjectURL(previewImg.src);
previewImg.src = '';
}
function handleSubmit() {
responseBox.classList.remove('opacity-0');
//Example usage
document.getElementById('ai-response').textContent = 'Image uploaded successfully!';
}
// Add event listeners
dropzoneFile.addEventListener('change', handleFileSelect);
removeImageBtn.addEventListener('click', removeImage);
submitButton.addEventListener('click', handleSubmit);
</script>
</body>
</html>{% endblock %}