helixml / demo-recipes

Project Structure and Organization

This outline describes the organization of the demo-recipes project codebase.

Top-Level Directory Structure

The project follows a standard directory structure:

  • src: Contains the core application logic, including models, components, and routing.
  • public: Stores static assets like images, CSS, and JavaScript files.
  • gptscripts: Houses scripts for interacting with OpenAI’s GPT models.
  • index.html: The main HTML file for the application.
  • package.json: Contains project dependencies, scripts, and metadata.
  • README.md: Provides a general overview of the project, including instructions for setting up and running the application.
  • tsconfig.json: Configures the TypeScript compiler.
  • webpack.config.js: Configures the Webpack build process.

src Directory

The src directory contains the core application logic, structured as follows:

  • components: Houses reusable UI components.
  • models: Defines data structures and interfaces for application data.
  • styles: Contains global CSS stylesheets.
  • utils: Provides utility functions and helpers.

public Directory

The public directory stores static assets:

  • images: Contains images used in the application.
  • styles.css: The main CSS stylesheet for the application.
  • main.js: Entry point for the application’s JavaScript code.
  • index.html: The main HTML file for the application.

gptscripts Directory

The gptscripts directory houses scripts for interacting with OpenAI’s GPT models, providing:

  • gpt.js: Contains functions for interacting with the GPT API.
  • utils.js: Utility functions for data processing and formatting.

Example Usage

Using the GPT API:

// gptscripts/gpt.js
          import { generateText } from './utils';
          
          const apiKey = 'YOUR_API_KEY';
          
          async function getGPTResponse(prompt) {
            const response = await fetch('https://api.openai.com/v1/completions', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${apiKey}`,
              },
              body: JSON.stringify({
                model: 'text-davinci-003',
                prompt,
                max_tokens: 100,
                temperature: 0.7,
              }),
            });
            const data = await response.json();
            return generateText(data.choices[0].text);
          }
          
          export { getGPTResponse };

Using a component:

// src/components/RecipeCard.jsx
          import React from 'react';
          import { getGPTResponse } from '../gptscripts/gpt';
          
          const RecipeCard = ({ recipe }) => {
            const [description, setDescription] = useState('');
          
            useEffect(() => {
              const generateDescription = async () => {
                const prompt = `Write a short description for a ${recipe.name} recipe.`;
                const newDescription = await getGPTResponse(prompt);
                setDescription(newDescription);
              };
              generateDescription();
            }, [recipe]);
          
            return (
              <div className="recipe-card">
                <h2>{recipe.name}</h2>
                <p>{description}</p>
              </div>
            );
          };
          
          export default RecipeCard;

Using utility functions:

// src/utils/helpers.js
          const capitalizeFirstLetter = (str) => {
            return str.charAt(0).toUpperCase() + str.slice(1);
          };
          
          export { capitalizeFirstLetter };