Code: https://editor.p5js.org/Janeliu13/sketches/Zez5CaQCW

For this week’s homework assignment, I wanted to build a greeting card generator by combining gemini API as well as Google Quick Draw. The user can input a type of greeting they want the AI to generate, such as “write me a birthday wish” or “write me a funny joke” and then Gemini will output one phrase based on your request. Then you can search for a doodle of something such as a “cake” or a “dog” and it will randomly select a doodle from the Google Quick Draw’s dataset. The doodle and the message will appear on the same canvas and users will be able to download the card and send it out. In the beginning, I started by working off of the gemini URL example from in-class. This week I experimented with Claude and wanted to test out how it can help me design a interface of my project. Previously I have always been only building a functional sketch but hadn’t really thought about visuals. But since I don’t have much experience with coding the visual aspects of webs or sketches like this, I wanted to see how I can utilize Claude in an effective way. Recently I have been fascinated by y2k aesthetics and I wanted to design my sketch with this vision in mind. Working with Claude involved a lot of iteration process. At first, the buttons were too large and the text were layering on top of each other. It seems like Claude has trouble with visual layout and it requires me to prompt each part one by one. I find that it is good at making incremental improvements based on specific feedback such as “Change the size of this button smaller” or “move the download button below the canvas”. When I gave the prompt of wanting y2k inspired visuals, Claude was able to implement relevant assets such as the animated floating stars, the pink color schemes, the drop shadow around the words, and decorative aspects like the stars in the corners of the canvas.

But of course there are things that didn’t work out. The doodle fetch function failed and after multiple attempts at prompting, I figured it must be a problem that Claude is unable to solve yet. Claude attempted several approaches such as direct API calls (blocked by CORS), and then ml5.js DoodleNet (required external library I didn't have loaded)

Overall I believe that Claude is really great for rapid prototyping. If you have a vision and want to visualize it quickly, you can use Claude to code a rough idea. But if you want to create something more specific, then you must be ready to go through long iteration processes to reach your desired results.

In the end, I decided to use another website’s API to get the images. It is a website called Pexels, and the website already has instructions on how to integrate the API into my sketch.

Resources:

Pexels: https://www.pexels.com/api/documentation/?language=javascript

Gemini: https://ai.google.dev/gemini-api/docs/quickstart

Built off of class example: https://editor.p5js.org/yining/sketches/cyjAvH2uO

and of course, Claude.