Code an Excuse Generator Using AI

🌱 How to start this project?

Do not clone this repository because we are going to be using a different template.

We recommend opening the flask template or the vanilla.js template using a provisioning tool like Codespaces (recommended) or Gitpod. Alternatively, you can clone the github repository on your local computer using the git clone command.

These are the repositories you need to open or clone:

1🐍 For Python:
2https://github.com/4GeeksAcademy/flask-rest-hello
3
4👩🏽‍💻 For Javascript:
5https://github.com/4GeeksAcademy/vanillajs-hello

⚠ You will need to have Node.js or Python 3.7+ installed if you do it locally, but all of that is already installed on Codespaces or Gitpod.

📝 Instructions

Step 1: Set Up the Project

• Choose your preferred language and set up the boilerplate project from the provided templates.
  • For Python: Use the Flask template.
  • For JavaScript: Use the VanillaJS template.
• Follow the instructions in the README of the respective repositories to set up your development environment.

Step 2: Get Access to ChatGPT's API

• Sign up for an account at OpenAI.
• Navigate to the API section and obtain your API key for accessing the free version of ChatGPT.

Step 3: Create an Input Form or use a prompt if building the project on the terminal

• Implement an input form in your chosen language where users can specify what the excuse should be for.
  • For Python (On the terminal): You might use the prompt() function to ask the user.
  • For JavaScript (): You might create an HTML form and handle form submission with JavaScript by manipulating the DOM.

Step 4: Connect to ChatGPT's API

• Use the value from the input form to create a prompt for the ChatGPT API request.
• Send the request to the ChatGPT API and handle the response.

Example for Python:

1import requests
2
3@app.route('/generate_excuse', methods=['POST'])
4def generate_excuse():
5    excuse_for = request.form['excuse_for']
6    prompt = f"Give me an excuse for {excuse_for}:"
7    
8    response = requests.post('https://api.openai.com/v1/engines/davinci-codex/completions', 
9                             headers={'Authorization': f'Bearer {api_key}'}, 
10                             json={'prompt': prompt, 'max_tokens': 50})
11    
12    excuse = response.json()['choices'][0]['text']
13    return render_template('result.html', excuse=excuse)

Example for JavaScript:

1document.getElementById('excuseForm').addEventListener('submit', async (event) => {
2    event.preventDefault();
3    const excuseFor = document.getElementById('excuseFor').value;
4    const prompt = `Give me an excuse for ${excuseFor}:`;
5
6    const response = await fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
7        method: 'POST',
8        headers: {
9            'Authorization': `Bearer ${apiKey}`,
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify({ prompt: prompt, max_tokens: 50 })
13    });
14
15    const data = await response.json();
16    const excuse = data.choices[0].text;
17    // Display the excuse to the user
18});

Step 5: Display the Generated Excuse

• Once you receive the response from ChatGPT's API, display the generated excuse to the user.
  • For Python (Flask): You might show the excuse in the terminal with a print().
  • For JavaScript: You might update the DOM to show the excuse.

Example for JavaScript:

1document.getElementById('excuseForm').addEventListener('submit', async (event) => {
2    event.preventDefault();
3    const excuseFor = document.getElementById('excuseFor').value;
4    const prompt = `Give me an excuse for ${excuseFor}:`;
5
6    const response = await fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
7        method: 'POST',
8        headers: {
9            'Authorization': `Bearer ${apiKey}`,
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify({ prompt: prompt, max_tokens: 50 })
13    });
14
15    const data = await response.json();
16    const excuse = data.choices[0].text;
17    document.getElementById('result').innerText = `Your excuse is: ${excuse}`;
18});

Bonus Section

Additional Features to Practice and Improve the Project

1. Styling: Add CSS to style your web interface, making it more user-friendly and visually appealing.
2. Customization: Allow users to specify different types of excuses (e.g., work, school, family).
3. History: Store generated excuses in a database or local storage so users can view previously generated excuses.
4. API Error Handling: Add proper error handling for API requests to improve the user experience.

Feel free to explore and add more features to make your Excuse Generator even more robust and user-friendly!