Personalized Motivational Quote Generator

A simple web application that generates personalized motivational quotes based on user input using AI.

Features

  • User Input: Enter your name or a keyword (e.g., "confidence", "success")
  • AI-Generated Quotes: Receive a personalized motivational quote that incorporates your input
  • Responsive Design: Works on both desktop and mobile devices
  • Fast Response: Uses a faster AI model for quicker quote generation
  • Loading Indicators: Clear visual feedback while quotes are being generated

How It Works

  1. Enter your name or a keyword in the input field
  2. Click the "Generate Quote" button
  3. The application sends your input to the OpenAI API
  4. A personalized motivational quote is generated and displayed

Technical Implementation

  • Frontend: HTML, CSS (Tailwind CSS), and JavaScript
  • Backend: Val Town HTTP trigger with OpenAI API integration
  • AI: Uses OpenAI's GPT-3.5-Turbo model to generate personalized quotes quickly

Project Structure

  • /index.ts - Main HTTP handler that serves the frontend and handles API requests
  • /frontend/index.html - The web application's frontend interface

API Endpoints

  • POST /api/generate-quote - Generates a motivational quote based on the provided input
    • Request body: { "input": "string" }
    • Response: { "quote": "string" }

Dependencies

  • OpenAI API (via Val Town's standard library)
  • Tailwind CSS (via CDN)

Performance Optimizations

  • Uses GPT-3.5-Turbo instead of GPT-4 for faster response times
  • Reduced token count for quicker generation
  • Added comprehensive loading indicators for better user experience
  • Improved error handling and debugging