Assignment 2

Due Thursday, October 1 at 1:00 pm Pacific

In this assignment, you'll build a website where the user can upload an image and see it transformed in an artistically interesting way. The purpose of this assignment is to give you practice asking for what you want and doing it clearly and precisely.

Step One: Get the Starter Files

Your first step is to clone the repository for this project. Start off by entering the CS193V development environment. You should see a prompt indicating that you're in the folder ~/projects:

student@cs193v-development:~/projects$

You will need to clone the repository containing your starter files. The repository lives at the URL https://github.com/cs193v-students/a2-<your-sunet>, where <your-sunet> is replaced by your SUNetID (e.g. htiek, szum, cbl, poohbear, etc.). For example, I (Keith) would use the URL https://github.com/cs193v-students/a2-htiek.

After you've done this, change into the directory you just checked out. Its name will be a2-<your-sunet>, as above.

Step Two: Make Something that Makes Art

We would like you to create a website that does the following.

  1. Ask the user to upload a photo (or photos, depending on what you're making).
  2. Do something "artistically interesting" with those photos.

This is intentionally extremely vague. We'd like you to proceed in three steps.

Step 1: Copy and paste the instructions above ("We would like you to … with those photos") into Claude Code running in Auto Mode. What did you see? Did the LLM ask you for any clarification about what you wanted? Do you like the finished product? No need to submit your answers, but really do think about this. Keep the Claude Code session open.

Step 2: Rewind the conversation back to a clean slate. Inside the same Claude Code session from above, type /rewind and hit enter. You should see a menu pop up that looks something like this:

Rewind

Restore the code and/or conversation to the point before…

      We would like you to create a website that does the following.…
      5 files changed +947 -2

    ❯ (current)


Enter to continue · Esc to cancel

Use the arrow keys to select your initial prompt. When you hit enter, you should see something like this:

Confirm you want to restore to the point before you sent this message:

   │ We would like you to create a website that does the following.…
   │ (7m ago)
    
The conversation will be forked.
The code will be restored -940 in index.html and 4 other files.

   ❯ 1. Restore code and conversation
     2. Restore conversation
     3. Restore code
     4. Summarize from here
     5. Summarize up to here
     6. Never mind

Choose the option to "Restore code and conversation." This will roll back all the code changes Claude made and leave you at an empty conversation.

(If you already closed the conversation from earlier, no worries! Open a new Claude Code instance. Type /resume and hit enter. You should see a list of prior conversations, and you can choose the one you had earlier. Claude Code will then pick up from there.)

The kind of version control git offers is far more expressive than what Claude Code can do on its own. However, the version in Claude Code is good to know about in case you need to undo something you just did.

Step 3: Think more about our instructions to "make something artistically interesting." What ideas do you have for what that could mean? Think it over a bit, then describe it to Claude and have it make it for you. There are so many interesting things you can do with images! Here's a sampler of things you can ask for, but we encourage you to be creative and try something new!

  • Recreate the website Koalas to the Max.
  • Make a 3D art gallery where you can walk around and look at the input photos as if they're in a museum.
  • Redraw the input image as ASCII art, or even consider drawing the image purely using emojis
  • Dither or halftone your images for a retro look.
  • Turn your image into an interactive jigsaw puzzle.
  • Pick 32 photos and render them on the faces of a soccer ball.
  • Posterize the image, possibly changing the colors along the way.
  • etc.

We recommend that you do a bit of your own reading and research on the topic before you start talking to your LLM. You will get a lot more mileage out of your coding agent if you do this.

Remember that you are not guaranteed to "one-shot" the finished product. Expect to do a bit of iteration. After the first draft comes back, play with it and critique it. Do you have any suggestions for ways to improve it? Any critiques of the system? We'll talk about how to find and report bugs next lecture, but in the meantime, here's some good advice when you want the LLM to change what it's doing: give specific, precise, actionable feedback. "Clicking button X after doing Y has no effect rather than doing Z" is better than "it's not working."

A worthwhile exercise, but not required: at some point, switch out of Auto Mode and use Manual Mode. See what commands the coding agent is doing. What do you see? Do you have a sense for what the commands do? Look up anything you're not familiar with using tldr or a standard Google Search. You'll learn a bunch in the process.

Step Three: Submit Your Work

You obtained the starter files for this assignment by cloning a git repo made especially for you. To submit your work, you need to commit the code you've written onto the main branch and push your changes to GitHub. Use a combination of git add, git commit, and git push to make that happen. We've specifically instructed Claude and Codex not to do these git commands for you because we want you to get practice doing this yourself.

And that's it! You're done. Go outside and watch the honeybees buzzing around the rosemary bushes near the main quad.