Update README.md with project details and instructions

README.md

@@ -1,10 +1,60 @@
----
-title: BlogWriterApp
-emoji: 📊
-colorFrom: yellow
-colorTo: indigo
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AI Blog Writer
+
+AI Blog Writer is a web application that leverages artificial intelligence to help users generate blog posts on various topics
+
+## Features
+
+- **Custom Blog Generation**: Users can input the topic, select the desired tone, specify length, and add any specific instructions to guide the content generation.
+- **Responsive Design**: Built with Bootstrap, the application is fully responsive and user-friendly, suitable for both desktop and mobile users.
+- **Dark Mode**: A sleek dark mode interface for comfortable usage in low-light conditions.
+
+## Getting Started
+
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
+
+### Prerequisites
+
+Before you begin, ensure you have the following installed:
+
+- Python 3.9 or later
+- Flask
+- OpenAI
+- OpenAI API key
+
+### Installation
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/yourusername/ai-blog-writer.git
+   ```
+
+2. Navigate to the project directory:
+
+   ```bash
+   cd ai-blog-writer
+   ```
+
+3. Install the required Python packages:
+
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+4. Run the Flask application:
+
+   ```bash
+   flask run
+   ```
+
+The application should now be running on [http://localhost:5000](http://localhost:5000).
+
+## Usage
+
+To use the application, simply navigate to the homepage, fill in the form with your blog post requirements, and click on the "Generate Blog Post" button. The AI will process your request and display a generated blog post based on your specifications.
+
+## Built With
+
+- [Flask](https://flask.palletsprojects.com/) - The web framework used
+- [Bootstrap](https://getbootstrap.com/) - The front-end framework used for responsive design
+- [OpenAI API](https://openai.com/) - The AI model API for content generation

app.py

@@ -0,0 +1,45 @@
+from flask import Flask, render_template, request
+from dotenv import load_dotenv, find_dotenv
+from openai import OpenAI
+
+load_dotenv(find_dotenv())
+
+app = Flask(__name__)
+client = OpenAI()
+
+def generate_post(tone, topic, length, instructions):
+    prompt = f"Write a {tone} blog post about {topic}. Make sure the blog post is no longer than {length} words and ends with a conclusion. {instructions}"
+    response = client.chat.completions.create(
+        model="gpt-3.5-turbo",
+        messages=[
+            {"role": "system", "content": f"You are an expert {tone} blogger and creative writer."},
+            {"role": "user", "content": prompt}
+        ],
+        max_tokens=600,
+        temperature=0.7,
+        top_p=0.9,
+        frequency_penalty=0,
+        presence_penalty=0,
+        stop=["In conclusion", "In summary"]
+    )
+    return response.choices[0].message.content.strip()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/generate', methods=['POST'])
+def generate_blog():
+    # Retrieve form data
+    topic = request.form.get('topic') 
+    tone = request.form.get('tone')
+    length = request.form.get('length')
+    instructions = request.form.get('instructions')
+    
+    # Here, you would add your model inference code to generate the blog post
+    generated_text = generate_post(tone, topic, length, instructions)
+
+    return render_template('results.html', generated_text=generated_text)
+
+if __name__ == '__main__':
+    app.run(debug=True)

dockerfile

@@ -0,0 +1,28 @@
+# Use the official Python image as base
+FROM python:3.9
+
+# Set environment variables
+ENV FLASK_APP=app.py \
+    FLASK_RUN_HOST=0.0.0.0 \
+    FLASK_RUN_PORT=7860
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements file into the container at /app
+COPY requirements.txt .
+
+# Install any needed dependencies specified in requirements.txt
+RUN pip install -r requirements.txt
+
+# Expose the secret OPENAI_API_KEY environment variable at build time
+RUN --mount=type=secret,id=OPENAI_API_KEY,mode=0444,required=true
+
+# Copy the rest of the application code into the container at /app
+COPY . .
+
+# Expose the port that Flask is running on
+EXPOSE 7860
+
+# Command to run the application when the container starts
+CMD ["flask", "run"]

static/js/script.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.getElementById('promptForm');
+    const button = form.querySelector('button[type="submit"]');
+    const spinner = button.querySelector('.spinner-border');
+
+    form.addEventListener('submit', function() {
+        button.childNodes[0].nodeValue = "Loading... ";
+        spinner.style.display = 'inline-block'; // Show spinner
+        button.disabled = true; // Disable button to prevent multiple submissions
+    });
+});
+

templates/base.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Blog Writer</title>
+    <!-- Include Bootstrap CSS -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body class="bg-dark text-white">
+
+    <div class="container custom-container">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+            {% block content %}
+            {% endblock %}
+            </div>
+        </div>
+    </div>
+
+<script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container mt-5"> <!-- Increase margin-top if needed -->
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-12"> <!-- Adjusted for wider width -->
+            <div class="card bg-secondary text-white">
+                <div class="card-body">
+                    <h1 class="card-title text-center">AI Blog Writer</h1>
+                    <form id="promptForm" action="/generate" method="post">
+                        <div class="form-group">
+                        <label for="topic">Blog Topic:</label>
+                        <input type="text" class="form-control" id="topic" name="topic" required>
+                        </div>
+                        <div class="form-group">
+                        <label for="tone">Desired Tone:</label>
+                        <select class="form-control" id="tone" name="tone">
+                            <option value="informative">Informative</option>
+                            <option value="casual">Casual</option>
+                            <option value="persuasive">Persuasive</option>
+                            <option value="formal">Formal</option>
+                            <option value="humorous">Humorous</option>
+                        </select>
+                        </div>
+                        <div class="form-group">
+                        <label for="length">Length:</label>
+                        <input type="number" class="form-control" id="length" name="length" required max="500" min="100">
+                        </div>
+                        <div class="form-group">
+                        <label for="instructions">Specific Instructions:</label>
+                        <textarea class="form-control" id="instructions" name="instructions" rows="3"></textarea>
+                        </div>
+                        <div class="d-flex justify-content-center">
+                            <button type="submit" class="btn btn-success">
+                                Generate Blog Post
+                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/results.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container mt-5"> <!-- Increase margin-top if needed -->
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-12"> <!-- Adjusted for wider width -->
+            <div class="card bg-secondary text-white">
+                <div class="card-body">
+                    <h1 class="card-title">Generated Blog Post</h1>
+                    <article class="card-text">
+                        {{ generated_text|safe }}
+                    </article>
+                    <div class="mt-3 text-center">
+                        <a href="{{ url_for('index') }}" class="btn btn-light">Generate another post</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}