JavaScript + OpenAI

During my JavaScript + OpenAI course, I developed two projects: "What to Eat," a CLI tool using Deno and OpenAI to provide personalized meal suggestions, and "Dream Catcher," a web app for dream interpretation featuring an interactive 3D scene created with Spline. Both projects showcase my skills in JavaScript and API integration.

Try it out: Dream Catcher

Role

Sole front-end developer

UI/UX Designer

Timeline

3 months

Tools

JavaScript

HTML/CSS

OpenAI API, API Integration

Deno Runtime, Deno Deploy

Command-Line Interface (CLI)

Spline

What To Eat

An app that helps you decide what to eat and teach you how to cook a quick meal based on the groceries that you have

Why What to Eat?

  1. Decision Assistance: Many people find themselves unsure of what to cook, especially when facing limitations based on the ingredients they already have at home. This app helps eliminate indecision by suggesting dishes that can be made with the groceries available, making meal planning easier and more efficient.

  2. Waste Reduction: By suggesting recipes based on what users already have, the app encourages using up ingredients that might otherwise go unused. This can help reduce food waste, which is both environmentally friendly and economically beneficial.

  3. Cooking Skill Development: For those looking to improve their cooking skills, the app provides an opportunity to try new recipes. Each suggested dish comes with a simple recipe, encouraging users to cook more and learn new techniques and flavor combinations.

Chellenges

  1. Implementing a user-friendly interface to interact with the app and provide seamless navigation through meal options and cooking instructions.

  2. Ensuring the app handles user inputs gracefully, validating user inputs, and providing appropriate error messages when necessary.

  3. Optimizing the performance of the app to provide quick responses to user queries and minimize loading times for meal suggestions and cooking instructions.

User Flow

  1. User Input for Groceries: Prompt the user to list their available groceries.

  2. Dish Suggestions: Generate dish suggestions based on the input groceries.

  3. User Decision: Allow the user to choose a dish from the suggestions.

  4. Recipe Guidance: Provide a simple recipe for the chosen dish.

  5. Loop for New Decisions: Offer the user a chance to make a new decision if they're unsatisfied with their initial choice.

Code

import { ask, say  } from "../shared/cli.js";
import { gptPrompt } from "../shared/openai.js";
import chalk from 'chalk';
import boxen from 'boxen';

async function main() {
    console.log(chalk.bold.yellowBright("Welcome to the Meal Suggestion App!"));
    
    const groceries = await ask(chalk.green.bold("What groceries do you have? List them separated by commas: "));
    
    // Generate dish suggestions based on the provided groceries
    const dishSuggestionsPrompt = `Given these groceries: ${groceries}, suggest three dishes that can be made. List them in a format suitable for selection.`;
    
    // Define max_tokens
    const maxTokens = 400; 
    const dishSuggestionsString = await gptPrompt(dishSuggestionsPrompt, { max_tokens: maxTokens });
    
    let dishSuggestions = dishSuggestionsString.split('\n').filter(line => line.trim().length > 0 && line.trim().match(/^\d\./)).map(line => line.trim().substring(2).trim());
    
    if (dishSuggestions.length === 0) {
        say(`No dish suggestions could be parsed from the response: "${dishSuggestionsString}"`);
        return; 
    }
    
    say(chalk.green.bold("Based on your groceries, you could make:"));
    const formattedSuggestions = dishSuggestions.map((dish, index) => `${index + 1}. ${dish}`).join('\n');
    say(boxen(formattedSuggestions, { padding: 1 }));
    
    const dishChoice = await ask(chalk.green.bold("Which dish would you like to make? (Enter the number corresponding to the dish): "));
    const chosenDish = dishSuggestions[parseInt(dishChoice) - 1];
    
    if (!chosenDish) {
        say("Invalid dish selection lol.");
        return; // Exit if no dish selected
    }
    
    // Generate recipe for the chosen dish
    const recipePrompt = `Provide a simple recipe for making ${chosenDish} using the following groceries: ${groceries}.`;
    const recipe = await gptPrompt(recipePrompt, { max_tokens: maxTokens });
    
    say(chalk.blue.bold(`Here is a simple recipe for ${chosenDish}:`));

    // Format recipe text using chalk
    const formattedRecipe = chalk.yellow(recipe);
    
    say(formattedRecipe);
    
    
}

main();

Preview

Dream Catcher

A dream interpreting app that helps you reveals your subconsciousness

Concept

Let people understand their dream through text interpretations and generative image.

Features

  1. Dream Analysis:

  • Automated Summarization: Users enter a description of their dream, and the application uses NLP to automatically generate a concise summary highlighting the main themes.

  • Creative Interpretation: Beyond basic summaries, the application provides a creative analysis of the dream, delving into potential symbolic meanings and emotional contexts.

  1. Dream Visualization:

  • Image Generation: Based on the analyzed content of the dream, the application generates an artistic image that visually represents the dream's themes and emotions.

  • Customization Options: Users can tweak the parameters of the image generation to better suit their vision of the dream.

Preview

Step 1: Start your journey to reveal your subconsciousness

In this step I added an embedded code from spline to make the website more immersive. Click on "Enter" to start your journey.

Step 2: Enter a dream description and generate an analysis based on your input.

Here you enter a description and then click the “analyze dream” button, it will analyze the symbolic meaning of your dream. If you are happy with the result, you can click on the "Generate Image" button.

Step 4: Generate an image based on your input

Two results to compare

Not satisfied with the result? No problem, you can regenerate image until you are happy with it

Step 5: Download the result as a html file, save in your computer as an archive

Want to keep the result? One click to download the result as html format

Let’s Collaborate

©

2024 Jingjing Han

Let’s
Collaborate

©

2024 Jingjing Han

Let’s
Collaborate

©

2024 Jingjing Han