sosokker/image-caption-generator
1
0
Fork 0
mirror of https://github.com/Sosokker/image-caption-generator.git synced 2025-12-19 02:24:04 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui: add style and loading

Browse Source
This commit is contained in:
Sosokker 2025-01-14 14:39:55 +07:00
parent f7205ada20
commit 54fd126a8f
1 changed files with 85 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
templates/index.html
View File

@ -27,12 +27,14 @@
</form> </form>
<h2>Generated Caption:</h2> <h2>Generated Caption:</h2>
<p id="caption">No caption generated yet.</p> <p id="caption">No caption generated yet.</p>
<p id="loading">Generating caption... Please wait.</p>
<img id="uploadedImage" src="/static/placeholder.jpg" alt="Uploaded Image" /> <img id="uploadedImage" src="/static/placeholder.jpg" alt="Uploaded Image" />
<script> <script>
const form = document.getElementById("uploadForm"); const form = document.getElementById("uploadForm");
const captionElement = document.getElementById("caption"); const captionElement = document.getElementById("caption");
const uploadedImage = document.getElementById("uploadedImage"); const uploadedImage = document.getElementById("uploadedImage");
const loadingElement = document.getElementById("loading");
form.addEventListener("submit", async (event) => { form.addEventListener("submit", async (event) => {
event.preventDefault(); event.preventDefault();
@ -50,15 +52,91 @@
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
// Send the file to the server // Show loading animation and clear previous caption
const response = await fetch("/upload/", { captionElement.textContent = "";
method: "POST", loadingElement.style.display = "block";
body: formData,
});
const result = await response.json(); // Send the file to the server
captionElement.textContent = result.caption; try {
const response = await fetch("/upload/", {
method: "POST",
body: formData,
});
const result = await response.json();
captionElement.textContent = result.caption;
} catch (error) {
captionElement.textContent = "Error generating caption. Please try again.";
} finally {
// Hide loading animation
loadingElement.style.display = "none";
}
}); });
</script> </script>
</body> </body>
<style>
body {
font-family: "Noto Sans JP", Arial, sans-serif; /* Japanese font with fallback */
background-color: #f8f8f8; /* Light, subtle background */
color: #333; /* Dark gray text for better readability */
max-width: 800px; /* Slightly wider for a balanced look */
margin: 20px auto;
padding: 20px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
border-radius: 10px; /* Smooth rounded corners */
}
h1 {
font-size: 2.5em;
color: #2c3e50; /* Deep blue-gray for a strong title */
margin-bottom: 20px;
}
h2 {
font-size: 1.5em;
color: #34495e; /* Slightly lighter gray-blue for subtitles */
margin-top: 30px;
}
p {
font-size: 1em;
line-height: 1.6;
}
form {
margin-top: 20px;
margin-bottom: 30px;
}
input[type="file"] {
padding: 10px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
}
button {
margin-top: 15px;
padding: 10px 20px;
font-size: 1em;
color: #fff;
background-color: #e74c3c; /* Bright red for a striking button */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #c0392b; /* Darker red on hover */
}
img {
max-width: 100%;
margin: 20px 0;
border: 1px solid #ddd; /* Subtle border around images */
border-radius: 5px;
}
#loading {
display: none;
font-size: 16px;
color: #007bff;
}
</style>
</html> </html>