Prompt Engineering Training Website

The Prompt Engineering Training Website is an educational tool designed to help users learn how to craft effective prompts for AI models, specifically using OpenAI's GPT-4 API. The website features a dual-panel interface: one panel sends direct prompts to the AI, while the other guides users through a series of clarifying questions to create enhanced prompts, demonstrating the difference in response quality.

Features

• Dual-Panel Interface:
  • Direct Panel: Send prompts directly to GPT-4 and see the raw response.
  • Enhanced Panel: Answer a series of questions (e.g., topic, tone, context) to craft a better prompt, then compare the enhanced response with the direct one.
• Session-Based Conversation Storage:
  • Conversations are stored using PHP sessions and persisted to JSON files in the api/sessions/ directory.
  • Conversations are trimmed to the last 10 messages to manage file size.
• Interactive UI:
  • Auto-resizing text areas for user input.
  • Typing indicators for a realistic chat experience.
  • Greeting detection: Simple greetings (e.g., "hello") bypass the question flow in the enhanced panel.

Tech Stack

• Frontend: HTML, CSS, JavaScript
• Backend: PHP (handles API requests and session management)
• API: OpenAI GPT-4 API
• Storage: File-based storage for conversations (JSON files in api/sessions/)

Project Structure

prompt-engineering-trainer/
├── .gitignore
├── api/
|   ├── gpt4_request.php
│   ├── /sessions
│   └── config.php
├── index.html
├── styles.css
├── script.js
└── README.md 

Usage

Direct Panel:
    Enter a prompt (e.g., "Write a story about a dragon").
    Press "Send" or hit Enter.
    View the direct response from GPT-4.
Enhanced Panel:
    Enter a prompt (e.g., "Write a story about a dragon").
    The system will ask clarifying questions one by one (e.g., "What is the topic?", "What tone is needed?").
    Answer each question to craft an enhanced prompt.
    Compare the enhanced response with the direct response.
    Note: If you enter a greeting (e.g., "hello"), the enhanced panel will skip the questions and respond directly.

Example Interaction Direct Panel:

User: "Write a story about a dragon."
AI: (A basic story about a dragon)

Enhanced Panel:

User: "Write a story about a dragon."
AI: "I'd like to help you craft a better prompt. What is the topic?"
User: "A dragon in a medieval setting"
AI: "What is the role of AI (e.g., think like a fantasy novelist)?"
(Continues through all questions)
AI: "Here's the enhanced prompt: [Detailed prompt](consists of the answers for the questions)"
AI: "Here's the response: [Enhanced story]"