AI WORKSHOP
Trondheim
16.10.23
Powered by
Resources:
Github Repository - Template me!Discord ServerSanity DocumentationChatGPTICEBREAKER:
Individual Introduction:
Each team member should introduce themselves to the group. Share your:
- Name
- School year
- Favorite Food
- Experience/Skill Level with Sanity/NextJS/OpenAI
Group Assignment:
As a group, brainstorm and choose a unique team name. If you need inspiration, feel free to ask ChatGPT for some creative suggestions.
Workshop Overview:
In this workshop, teams will harness the power of AI to create fairytales and images. Our primary objective is to address and challenge the gender bias that often exists in contemporary AI. We aim to achieve this by either modifying existing fairytales or generating entirely new ones using AI, with a focus on altering the perspective or gender of the main character.
Technical Integration:
Teams will be tasked with integrating the OpenAI API into Sanity to generate both text and images.
Challenge Outcome:
After successfully completing the challenge, each team must:
- Upload an image to Sanity.
- Generate images with AI, which will be integrated into the frontend (optional, not mandatory to save to Sanity). If you have the expertise and wish to save them in Sanity, you are welcome to do so.
Getting started
- Repository Setup:
- Designate one team member to fork the repository to their GitHub account.
- The initial person adds team members as contributors/admins to the repository.
- Clone Repository:
- Each team member clones the repository from the initial person's GitHub account to their local machine.
- Environment Configuration:
- Create a
.env
file in the root folder. - Copy and paste the example
.env
configuration from the Discord or relevant source.
- Create a
- Sign Up for Sanity.io
Visit the Sanity.io website.
Click on "Get Started" to create your account. Provide your name, email, and a secure password.
- Log In to Your Sanity.io Account
After signing up, log in to your Sanity.io account using your credentials.
- Create a New Project
Once logged in, click on the "New Project" button to initiate the project creation process.
- Configure Your Project
Choose a project name, billing plan, and any additional options as needed. Confirm your selections.
- Project Setup
Select a project template or start with a blank project based on your requirements.
- Wait for Project Creation
Sanity.io will create your project. This may take a few moments, so please be patient.
- Access the Project ID
Upon project creation, you'll find your unique project ID in the project dashboard or settings. It's typically a long string of characters.
- Add the Project ID to Your Environment Configuration
Copy and paste your project ID into the
.env
file. - Channel Creation:
- Set up communication channels or groups within your chosen communication platform (e.g., Discord channels) to facilitate collaboration among team members.
- Dependency Installation:
- Open a terminal inside the root folder of the project.
- Run
npm install
to install project dependencies.
- Start Development Server:
- After the installation is complete, run
npm run dev
to start the development server.
- After the installation is complete, run
- Testing and Verification:
- Open your web browser and navigate to http://localhost:3000/studio.
- Here you will get a CORS error, navigate to your sanity studio management pagesanity management page, select your project, navigate to the API tab. Add
http://localhost:3000
to the CORS Origins list. - Click on "Fairytales" to verify that you have three documents containing three Norwegian fairytales.
How to generate a Sanity Studio Project ID
Disclaimer! Okay, hold your horses. In order to access to the Sanity studio, you need to generate a project ID(we need this for our .env file). Follow the steps below to generate a project ID, it will create a new repository for you, but you can discard it after you have generated the project ID.
Congratulations! You've successfully generated a Sanity Studio Project ID.
For any updates or changes to the process, please refer to the Sanity.io documentation.
The Challange
Task 1
Integrate the pre-built React component within the studio to harness the power of OpenAI text generation. You can locate this component in the file at /components/OpenAISanity/OpenAISanity.tsx
Ensure that you've updated the
const callApi
function to fetch data from OpenAI (refer to the code for guidance).Within the
generateStory
function, make sure to invoke thecallApi
function you previously defined.
Create a new fairytale and take note of the OpenAI text generator input field, which you can use for testing. Don't forget to publish any changes made in the Sanity Studio – the publish button can be found at the bottom of the page and is denoted by a green icon.
![Image of Sanity studio with custom component](/_next/image?url=https%3A%2F%2Fwww.linkpicture.com%2Fq%2FScreenshot-2023-04-13-at-20.28.59.png&w=1080&q=75)
Task 2
Complete the skeleton for the slug page, which involves retrieving data from Sanity and connecting it to the fairytale interface. You can access this file at pages/fairytale/slug.tsx
On the frontend, display a cover image, the generated text, and the title. You might have to take a closer look at the
getFairytale(params.slug)
file to see how the GROQ query is structured, it might be missing something important.As a bonus, add some styling to enhance the page's appearance.
Task 3
Continuing on the [slug] page. Generate an image with the OpenAI api. This image will not be added to sanity, it will only be added to the frontend.
generateNewStoryImage
. The image(s) should reflect the story you have generated.`An image with fairytale style, with the following story: *insert generatedText*.`
Hint: You can copy and tweak the same function that you used in task 1.
Task 4
Crafting effective prompts for the OpenAI API can make a significant difference in the quality and relevance of the generated content. Here's a general approach to consider:
Clarity and Specificity: Be clear and specific in your prompts to get the desired results. Vague prompts may lead to less relevant outputs
Length and Detail: Experiment with prompt length and detail, finding the right balance between context and brevity.
Tone and Language: Use positive or negative language to influence the tone of the output. Inject creative language to inspire creativity.
Iteration: Don't hesitate to try variations and synonyms in your prompts. Model responses can vary.
Balance Control: Strike a balance between providing specific instructions and allowing creative freedom.
Conditional Statements: Use conditionals in prompts to guide the model's behavior.
Human Feedback: Consider a human feedback loop to improve results and train the model.
Bonus:
Create a new Sanity Component and generate the image in the studio.
Use the
'/api/openai-gpt'
endpoint, instead of the one you used in task 1, to generate a new story. The endpoint requires a different input format, see the code for more details.
Task 5 - Presentations
Each team will present their work and results in a 5-minute presentation, with the flexibility to use their preferred format.