Adds frontend

This commit is contained in:
Regis David Souza Mesquita 2025-03-02 03:28:36 +00:00
parent 353c69294a
commit 55215a0edb
3 changed files with 99 additions and 1 deletions

27
Dockerfile Normal file
View file

@ -0,0 +1,27 @@
# Use an official Python runtime as a parent image
FROM python:3.9-slim
# Install system dependencies including ffmpeg
RUN apt-get update && apt-get install -y --no-install-recommends \
ffmpeg \
build-essential \
&& rm -rf /var/lib/apt/lists/*
# Set environment variables for litellm API key and model (users can override these)
ENV LITELLM_API_KEY=""
ENV MODEL_NAME="mistral-small-latest"
# Set working directory
WORKDIR /app
# Copy the current directory contents into the container at /app
COPY . .
# Install Python dependencies
RUN pip install --no-cache-dir -r requirements.txt
# Expose port 5000 for the Flask server
EXPOSE 5000
# Command to run the Flask server
CMD ["python", "vibe/main.py", "--serve"]

67
templates/index.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vibe: Article Summarization &amp; TTS Pipeline</title>
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
.container { max-width: 600px; margin: auto; }
input[type="text"], textarea { width: 100%; padding: 10px; margin: 8px 0; }
button { padding: 10px 20px; font-size: 16px; }
.hidden { display: none; }
</style>
</head>
<body>
<div class="container">
<h1>Welcome to vibe</h1>
<p>Enter your interests below to generate a summary MP3 of the latest Computer Science research articles.</p>
<form id="interestForm">
<label for="user_info">Your Interests:</label>
<textarea id="user_info" name="user_info" rows="4" required></textarea>
<br>
<button type="submit">Submit</button>
</form>
<div id="status" class="hidden">
<p>Processing your request, please wait...</p>
</div>
</div>
<script>
document.getElementById('interestForm').addEventListener('submit', async function(e) {
e.preventDefault();
const userInfo = document.getElementById('user_info').value;
document.getElementById('status').classList.remove('hidden');
try {
const response = await fetch('/process', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_info: userInfo,
max_articles: 5,
new_only: false
})
});
if (response.ok) {
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'summary.mp3';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
} else {
alert('Error processing your request.');
}
} catch (error) {
alert('An error occurred: ' + error);
}
document.getElementById('status').classList.add('hidden');
});
</script>
</body>
</html>

View file

@ -1,4 +1,4 @@
from flask import Flask, send_file, request, jsonify
from flask import Flask, send_file, request, jsonify, render_template
import logging
from .orchestrator import process_articles
from .config import CACHE_DIR
@ -34,5 +34,9 @@ def process_endpoint():
logger.info("Process complete. Returning MP3 file.")
return send_file(output_mp3, as_attachment=True)
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)