A website that utilizes the DaVinci 2 AI to let you wish upon a star.
General Assembly capstone project. Geppetto is a Fullstack MERN application that utilizes the DaVinci 2 AI text processing model to allow users to create custom 'puppets', each with their own AI generated story.
Please note:
AI is a powerful tool with boundless potential, as such it is important that we use it responsibly and with humanity.
Users with any concerns, please feel free to email me at [email protected]
DaVinci 2 is an AI model developed by OpenAI that focuses on understanding and generating text. The model can do everything from content generation and summarization to sentiment analysis. For more information on OpenAI and the text-completion features used in this project, please visit OpenAI's website:
Geppetto makes use of the text-completion endpoint of the DaVinci 2 AI. Below is an example API request made in Node.js using the text-completion endpoint:
The prompt is given to the AI model to generate text, along with a temperature that indicates how closely the model will adhere to the prompt instructions.
The functionality of Geppetto hinges on accepting custom user inputs that are then set as state and provided as a payload within the restful API request, so that they can then be interpolated into a prompt generator function that is passed to the OpenAI API call as the prompt attribute, which the AI uses to generate custom text completions.
What does that mean?
Let's break it down:
Users provide input corresponding to different attributes of their custom model.
The input is captured in state and then passed to an API request called from the puppets API.
The API acts as middleware, sending an AJAX request to the backend.
The create route is pinged and the corresponding function called from the controller.
The create function calls the OpenAI API, passing a custom prompt generated using the generatePrompt function.
The generatePrompt function takes the payload, containing the state of the model the user is creating, and returns a custom prompt by interpolating the user input. The custom prompt is included in the OpenAI third party API call and the reponse is parsed from json and returned to the front-end where it is used to update the state and display the text completion on the UI.
An example of a completed prompt:
Users can then save prompts and have them appear in a Prototypes component.
And that's it!
Geppetto was designed using raw CSS with the exception of Bootstrap to make the navbar responsive. Media queries were added for small screen devices.
Here is a link to the project's Whimsical.
Below are a few selections comparing the planned UI to the final draft:
Whimsical:
Finished UI:
Whimsical:
Finished UI:
Whimsical:
Finished UI:
All illustrations are by Chiostri frenzi, an Italian illustrator from the late 1900's.
Geppetto uses a very simple model scheme in conjunction with MongooseDB to achieve its CRUD.
Below is an image of the Entity Relationship Diagram made for this project using Lucidchart:
The most difficult part of this project was, thankfully, not the incorporation of OpenAI's API. OpenAI's documentation is thorough and even provides starter project examples to help developers jump right into coding.
Most of the challenges encountered had to do with updating state in React. There were certain instances where functions that should have been nested within child components were in the parent component, causing state issues that affected mapping state to children components. Due to the asynchronous nature of certain functions and state updates, state was at least momentarily set to undefined. Since the map method can only work with arrays, this broke the code.
My takewaway is that state change should take place within the components directly affecting that change by passing state and setState down as props to the child component. Once I adopted this approach the project flowed smoothly.
This is a full stack MERN application (Mongoose, Express, React, Node) that utilizes OpenAI's DaVinci2 text-processing AI model.
I would like to make this site more accessible by using the UberDuck AI API to incorporate text-to-speech functionality, as well as build unit tests using Jest, Mocha and Chai.