I have built an app, called Image Thing, for web developers who are looking for a way to streamline the generation of img tags. Image Thing allows developers to upload images, pin files to IPFS, and generate img tags.
Demo
In this demo, you can see:
User authentication.
File check to make sure only images are uploaded (no PDFs).
Successful image uploads with captions automatically generated.
Pre-signed URLs are generated for unpinned files and opened in separate tabs.
This project was created for the Pinata Challenge; it's an app which combines
Pinata's file storage APIs with OpenAI's LLMs to provide unique features tailored towards image files.
One must first set up a database. This application uses Supabase. A table needs to be set up with the following columns:
id int8
created_at timestamptz
upload jsonb
hash text
user_id uuid
is_pinned bool
pinata_id text
pinata_cid_private text
pinata_cid_public text
After that, policies need to be created for SELECT, UPDATE, INSERT, and DELETE to allow only authorized users
to access rows in the table. The table should have row-level security (RLS) enabled.
Environment Variables
The following environment variables need to be created:
Users who upload their images automatically have an alt text and caption generated using OpenAI's chat completions API. By default, the images are uploaded to the Pinata Files API which means the images are private. If a user wants to preview an image, they can click a button to generate a pre-signed URL that opens in another tab.
If a user wants to make their image public, the Pinata Web3 file API is used to pin the file to IPFS. Once an image is public, users can click a button to generate an img tag with the IPFS URL and alt text pre-populated.
In the backend, Supabase is used to handle user authentication and track uploads for each user. Image hashing is performed to make sure users aren't uploading duplicate files. Supabase is also used in the frontend to quickly update UI state based on user actions. For example, we can see file stats updating as different actions are taken.
The app is built with NextJS and TypeScript, and published under the MIT license.
