AI WORKSHOP

Trondheim

16.10.23

Made by

Powered by

Next.jsSanityOpenAI

Resources:

Github Repository - Template me!Discord ServerSanity DocumentationChatGPT

ICEBREAKER:

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

  1. 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.
  2. Clone Repository:
    • Each team member clones the repository from the initial person's GitHub account to their local machine.
  3. Environment Configuration:
    • Create a .env file in the root folder.
    • Copy and paste the example .env configuration from the Discord or relevant source.
    4. 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.

    1. 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.

    2. Log In to Your Sanity.io Account

      After signing up, log in to your Sanity.io account using your credentials.

    3. Create a New Project

      Once logged in, click on the "New Project" button to initiate the project creation process.

    4. Configure Your Project

      Choose a project name, billing plan, and any additional options as needed. Confirm your selections.

    5. Project Setup

      Select a project template or start with a blank project based on your requirements.

    6. Wait for Project Creation

      Sanity.io will create your project. This may take a few moments, so please be patient.

    7. 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.

    8. Add the Project ID to Your Environment Configuration

      Copy and paste your project ID into the .env file.

    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.

  4. Channel Creation:
    • Set up communication channels or groups within your chosen communication platform (e.g., Discord channels) to facilitate collaboration among team members.
  5. Dependency Installation:
    • Open a terminal inside the root folder of the project.
    • Run npm install to install project dependencies.
  6. Start Development Server:
    • After the installation is complete, run npm run dev to start the development server.
  7. 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.

The Challange

Let's get started!

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

  1. Ensure that you've updated theconst callApi function to fetch data from OpenAI (refer to the code for guidance).

  2. Within the generateStory function, make sure to invoke the callApi 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

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

  1. 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.

  2. As a bonus, add some styling to enhance the page's appearance.

Don't forget to publish any changes you make in Sanity Studio by clicking the green button located at the bottom of the page.

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.

Replace the image prompt text with your own custom prompt in the function generateNewStoryImage. The image(s) should reflect the story you have generated.
Example:
`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:

  1. Clarity and Specificity: Be clear and specific in your prompts to get the desired results. Vague prompts may lead to less relevant outputs

  2. Length and Detail: Experiment with prompt length and detail, finding the right balance between context and brevity.

  3. Tone and Language: Use positive or negative language to influence the tone of the output. Inject creative language to inspire creativity.

  4. Iteration: Don't hesitate to try variations and synonyms in your prompts. Model responses can vary.

  5. Balance Control: Strike a balance between providing specific instructions and allowing creative freedom.

  6. Conditional Statements: Use conditionals in prompts to guide the model's behavior.

  7. 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.

Example code

Show me code!