Imagine a woman, named Louise, sending a digital greeting card to her best friend Thelma. Never mind that they both are fictional movie characters. I designed a website where anybody can send a greeting to anybody, for any reason
Having an unusual family composition – and a lot of international holidays can be tough. Sometimes it’s hard to come up with lovely text to write to my step-father’s ex-step-mother during her difficult times. I also have family members and friends in different countries and anybody who’s changed cultures knows how level of formality can also change even with people you are close to.
A lot of my friends have started using ChatGPT to help them write drafts of work emails. I thought that it would be cool to
Major challenges and solutions
Tech Side:
I wasn’t really sure how my website would work initiatlly. I had several ideas:
- Using DialogFlow API to generate the text https://cloud.google.com/dialogflow/docs/
- Create a list of holidays and celebrations
- Potentially use https://www.openholidaysapi.org/en/
- Use language processing API
In the end, I have decided to create a website where the user is instructed to enter their name, the name of the recipient, and occasion (they can write several sentences or a word), and choose on a scale how 1) close they are to the recipient, 2) how frequently they interact, 3) and the level of formality they’d like for the message. The OpenAI API is then used to generate a message on a card background that I have designed. I had considered also using “humor” scale — but since it’s very subjective, I left it out.
Getting the website to work was incredibly hard to get the website to work. I think the problem is that I “overwrote” the code and when I was adding or removing components, I didn’t always do proper notations of what I changed.
I had originally tried to do everything at once, which made it more difficult to figure out which part wasn’t working. I think if I tried to redo the project — I’d start by getting AI to work with text, then design the actual side and add controls.
My project crashed right at the beginning of the class, when I tried to make last minute change and move it to GitHub manually. I also had the pilot working on Visual Studio Code — so I agreed to make some changes I didn’t realize I was making. That made the code unstable even when our resident, Dora, helped me fix it. Finally, when I thought I was good to go, the AI limit was reached (I still don’t know how to properly deal with that, but it seems that my project for another class where I relied on Dall-E a lot was the culprit).
The main obstacle was getting the AI to work. Once I figured that out — using both the tutorials on the OpenAI site and ChatGPT (which ironically wasn’t as useful), I started generating the cards. It also took a bit of time, to make sure the AI was using the right inputs. Another challenge was that I restricted the number of characters so they would fit on the card page — but AI would simply cutoff the message mid-sentence instead of making the sentence shorter.
One quirk I did not fix was that sometimes the generated message would refer to the scale the user selected but instead of saying “Even though we are very close”, it would say “Even though we have the proximity level 87”, which I thought was funny.
One main thing I have not resolved — is I couldn’t get my site to work fully on Glitch or Vercel. Every time, OpenAI would send me an email that my API Key has been possibly leaked (even though I made sure to make it private in Glitch code and followed the tutorial instructions). I tried to generate a new code 3 times, and each time the same thing happened.
Style Side:
With style, I went from more to less. I originally created (on Canva) a background that looked “cute” but then I realized that not only was it inappropriate for somber occasions, it also seemed too childish.
I decided to keep my colors more neutral. I also experimented with Dall-E to create different backgrounds for the card but decided that they were too busy and ende
d up creating a beige background with a “for you” message with an abstract heart at the bottom and a “A special message” on an envelope at the top.
It was also very important for me to have the message appear in a font that resembles handwriting, although I have belatedly realized that American schools have stopped teaching cursive about 10 years ago, so gen Z users might not be able to read. Going forward, I’ll try to find a font that looks more like hand-written print.
I also added a short video SVG to the start page, which was an idea one of my classmates gave me.
Lessons learned and Next Steps
The most rewarding feeling was finally to see my website work. Here’s a video of the test:
The most important lesson I’ve learned is to have backups for everything! As I’m still struggling with navigating GitHub and branches/version of the site, I will copy folders to Dropbox while I’m still working on the project.
I have also learned that I should hope for the best but expect that every component that can crash may crash at the most inopportune time — and I should have contingency for that. The third lesson is to not be afraid to reach out to people for help, but do it early because they might not have the time to help.
Also, trust yourself — but also document every step. Sometimes in stressful environments we can make changes that won’t make sense later. I still haven’t figured out the perfect system for this.
I have also learned that less is more — and it’s better to gradually add elements, other than to try and fit everything at once.
Going forward, I’d like to make my website live — this is one limitation I haven’t overcome. I also want to create an ability for users to forward the cards, share on social media, or download. The really next next step would be to create different backgrounds for the card, so that people can make it more suitable for their needs.
Links:
Here’s the GitHub Link
Canva materials (card and logo)
Leave a Reply