baptadn/photoshot

An open-source AI avatar generator web app - https://photoshot.app

Photoshot

An open-source AI avatar generator web app

demo-final.mp4

Try it out at photoshot.app

Stack

• ▲ Next.js for webapp
• 🖼 Chakra UI for UI components
• 📦 Prisma for database
• 🧠 Replicate, a platform for running machine learning models in the cloud
• 💰 Stripe for payments
• 👩‍🎨 Stable Diffusion an open-source text-to-image generation model

Getting Started

Install dependencies:

yarn install

You can use Docker to run a local postgres database and maildev server (accessible at http://localhost:1080):

docker-compose up -d

Create .env.local:

cp .env.example .env.local

Update environment variable values:

Environment Variable	Explanation
DATABASE_URL	The connection string for your PostgreSQL database. It will be postgresql://photoshot:photoshot@localhost:5432/photoshot if you are using the provided docket setup.
NEXTAUTH_URL	The URL of your Next.js application, used for authentication purposes with NextAuth.js.
S3_UPLOAD_KEY	The access key for your AWS S3 bucket used for storing pictures.
S3_UPLOAD_SECRET	The secret key for your AWS S3 bucket used for storing pictures.
S3_UPLOAD_BUCKET	The name of your AWS S3 bucket used for storing pictures.
S3_UPLOAD_REGION	The AWS region where your S3 bucket is located.
REPLICATE_API_TOKEN	The API token for Replicate.
REPLICATE_USERNAME	The username associated with your Replicate account.
REPLICATE_MAX_TRAIN_STEPS	The maximum number of training steps for the Dreambooth AI model. Defaults to 3000.
REPLICATE_NEGATIVE_PROMPT	A prompt used for negative training examples in the Replicate AI model. Defualts to cropped face, cover face, cover visage, mutated hands
REPLICATE_HD_VERSION_MODEL_ID	The version of the model for upscaling the generated images. Such models can be browsed here
NEXT_PUBLIC_REPLICATE_INSTANCE_TOKEN	A unique identifier for the training data. It can be any string. For best results use an identifier containing three Unicode characters, without spaces e.g. cjw
SECRET	A random string used for NextAuth.js authentication.
EMAIL_FROM	The email address from which emails will be sent.
EMAIL_SERVER	The SMTP server URL used for sending emails. It will be http://localhost:25 if you are using the provided docker setup,
STRIPE_SECRET_KEY	The API key for your Stripe account.
NEXT_PUBLIC_STRIPE_STUDIO_PRICE	The price of a studio in cents (e.g., 1000 = $10).
NEXT_PUBLIC_STUDIO_SHOT_AMOUNT	The maximum number of shots allowed per studio.
OPENAI_API_KEY	The API key for the OpenAI API, used for the prompt wizard feature.
OPENAI_API_SEED_PROMPT	A seed prompt used for generating style prompts using the OpenAI API.

Please note that if you want to use the provided docker-compose setup you have to disable TLS in your .env.local by adding:

NODE_TLS_REJECT_UNAUTHORIZED = "0"

Run migrations

yarn prisma:migrate:dev

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

photoshot's Issues

Can you deploy this app to hosting service?

Endless loading when trying to upload images to studio

When trying to upload images to a new studio, I am getting endless loading and images are not being uploaded to S3.
This is the error shown in the console.
Uncaught (in promise) Error: Pica: cannot use getimagedata on canvas, make sure fingerprinting protection isn't enabled.

Bucket policy and CORS policy both seem fine in AWS.

zip not created

I am trying to run this locally and the zip file is not being created on S3. Do you know how to debug this further?

Removing Selected photos before upload.

Removing Selected photos before upload.

If it is possible to be added in the check-list to have ability to remove the images before pressing (Upload) button.

Select Style of Shot (Auto Prompts)

Hi there,

I wish I could contribute to this, but unfortunately my skills are messy and cannot add to any contribution I barely do it myself.

I am not sure if the Auto Generation of Shots will conflict with this, but maybe this one opens more creativity and options to the End-User, while guiding them through an awesome user-experience.

Can this be self-hosted and trained locally?

I don't see it clear if this can be run locally and trained locally. Is it possible?

Generated images are completely unrelated to training data

After a few attempts to train on 10 or 20 images I get completely different people after inserting prompts. What am I missing?
I'm using and the images seemed to be uploaded properly.

REPLICATE_MAX_TRAIN_STEPS=3000
REPLICATE_NEGATIVE_PROMPT="cropped face, cover face, cover visage, mutated hands"
REPLICATE_HD_VERSION_MODEL_ID=42fed1c4974146d4d2414e2be2c5277c7fcf05fcc3a73abf41610695738c1d7b
NEXT_PUBLIC_REPLICATE_INSTANCE_TOKEN=cjw

re-use previous seed for stable runs

"use this image as model"

Getting 'Greeting never received' error

Hi, trying to test in github codespaces.
I followed all the steps in the readme, but I never receive the email magic link when I try to signup/login.
I get:

https://next-auth.js.org/errors#signin_email_error Greeting never received {
  error: {
    message: 'Greeting never received',
    stack: 'Error: Greeting never received\n' +
      '    at SMTPConnection._formatError (/workspaces/photoshot-0/node_modules/nodemailer/lib/smtp-connection/index.js:790:19)\n' +
      '    at SMTPConnection._onError (/workspaces/photoshot-0/node_modules/nodemailer/lib/smtp-connection/index.js:776:20)\n' +
      '    at Timeout.<anonymous> (/workspaces/photoshot-0/node_modules/nodemailer/lib/smtp-connection/index.js:710:22)\n' +
      '    at listOnTimeout (node:internal/timers:559:17)\n' +
      '    at processTimers (node:internal/timers:502:7)',
    name: 'Error'
  },
  providerId: 'email',
  message: 'Greeting never received'
}

privacy doc

add a page that describes the privacy concerns

• where is the data stored
• how long is it going to be stored for
• who can it be transmitted to

the privacy policy of Replicate is slightly concerning :|

We may disclose your information also:
to our subsidiaries and affiliates;
to contractors, service providers, and other third parties we use to support our business;

Failed yarn install some modules on M1 Arm architecture

Hi there, firstly thanks for your work but I'm getting installation some dependency’s on m1 arm

info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The CPU architecture "arm64" is incompatible with this module. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The CPU architecture "arm64" is incompatible with this module. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The CPU architecture "arm64" is incompatible with this module. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The CPU architecture "arm64" is incompatible with this module. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The CPU architecture "arm64" is incompatible with this module. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The CPU architecture "arm64" is incompatible with this module. info @next/[email protected]: The platform "darwin" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. info @next/[email protected]: The CPU architecture "arm64" is incompatible with this module. info @next/[email protected]: The CPU architecture "arm64" is incompatible with this module. info "@next/[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. error [email protected]: The engine "node" is incompatible with this module. Expected version "^12.19.0 || ^14.15.0 || ^16.13.0 || ^18.12.0". Got "19.2.0" error Found incompatible module.

Training keeps failing + unexpected model and someone else's photos on my replicate dashboard.

Hi,
I am able to upload images and pay and start the training, but it always fails with this error:
We are sorry but the creation of the model failed. Please contact us by email so we can fix it/refund you.

Looking at the replicate.com dashboard>Recent predictions, for each attempt, I see a model with Failed status.

Clicking on the ID, shows an Input and Output page, with a link to a .zip file that is broken under Input, and "404 Client Error" in the Output. It links to an unexisting .zip file on my S3 bucket.

Question 1: is this a zip file that failed to ever be created or that was deleted by Photoshot when the training failed?

Would this be a permissions issue and if so, what would need to change? Photoshot seems to be able to upload and read the images, so why not the zip?

Clicking on the Version link (replicate/dreambooth:...) shows a page with what seems to be someone else's training. The instance_prompt says "a photo of bfirsh" and a link to data.zip downloads a folder with ben firshman's photos (replicate's founder). Another link to output.zip gets what looks like a 2GB trained model.

Question 2: are these a normal part of the process?

Thanks

Auto Shots generator.

I honestly think, most end-users would not be interested in typing Prompts, which they have no idea how it works and what it does.

The best way to guide the END-USER to have know how prompting works, and what it does is by giving an example and kind of a (gift) by AUTO GENERATING 10 - 20 well written prompts using their STUDIO NAME.

Then, the end-user can use the purchased shots to its best use.

It would be amazing if we can do the following:

• Control the number of AUTO prompts. ( from .env.local )
• Control the auto prompts ARRAY with ${fill_studio_name} here.

Thanks alot.

Can use alternative models?

Hello, is it possible to use alternative stable diffusion or other pre-trained models hosted on Replicate?
If so, how?
Thanks

use a textarea instead of an input

prompts can grow quite fast and it's hard to read in a prompt

Failed to upload photos Amazon S3

anyone know how to fix this?

.env variables errors

Hi developer, what do I need to generate those variables to run the project successfully? Is it generated, or anyway to get it? Any sample?

REPLICATE_HD_VERSION_MODEL_ID
NEXT_PUBLIC_REPLICATE_INSTANCE_TOKEN
OPENAI_API_SEED_PROMPT

I get this error when I try to access the dashboard

./node_modules/date-fns/esm/locale/en-US/_lib/match/index.js
Module parse failed: Unexpected token (61:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| parsePattern: parseOrdinalNumberPattern,
| valueCallback: function valueCallback(value) {

  return parseInt

add pagination

Can add type of suject as Child

Can add type of suject as Child

prisma:migrate:dev looks for .env not .env.local

When running prisma:migrate:dev, I get an error:

error: Environment variable not found: DATABASE_URL.
  -->  schema.prisma:3

The workaround is to add an .env file (in addition to .env.local) with a DATABASE_URL= ... line.
Simply renaming .env.local to .env seems to create other problems.

Invalid Image URLs on Studio Page

Hello,

I've encountered an issue while navigating through the studio page. The photo shots displayed on the page are linked to invalid URLs, thus the images are not loading as expected.

The images are hosted on Replicate CDN and it seems like these images were cleaned up after some time, leading to the invalid URLs. This might be the reason why the images are no longer available on the studio page.

Is there any mechanism we can implement to persist these images or prevent them from being cleaned up?

Thanks!

Database Issue

I keep getting getting possword incorrect errors when it is correct trying to connect postgres database, what service did you use to create the database? I'm trying with Neon.tech?

error about https-proxy-agent problem occurred when deployment in vercel and local machine

Same error occurred in my local machine(Mac M1) and problem solved after copy the module manually.

---

Error Log

src/pages/_app.tsx

22:32:30.839 | An error occured in @next/font.
22:32:30.839 |  
22:32:30.839 | You might be using incompatible version of @next/font (13.5.4) and next (13.0.6). Try updating both @next/font and next, if the error still persists it may be a bug.
22:32:30.839 |  
22:32:30.839 | Error: Cannot find module 'next/dist/compiled/https-proxy-agent'
22:32:30.839 | Require stack:
22:32:30.839 | - /vercel/path0/node_modules/@next/font/dist/google/get-proxy-agent.js
22:32:30.839 | - /vercel/path0/node_modules/@next/font/dist/google/fetch-css-from-google-fonts.js
22:32:30.839 | - /vercel/path0/node_modules/@next/font/dist/google/loader.js
22:32:30.839 | - /vercel/path0/node_modules/@next/font/google/loader.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/compiled/webpack/webpack.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/server/config-utils.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/server/config.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/build/index.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/cli/next-build.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/lib/commands.js
22:32:30.840 | - /vercel/path0/node_modules/next/dist/bin/next
22:32:30.841 | at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)

Can you provide a more detailed text to run it?

If I clone the repo and run it according the readme, I get a "TypeError [ERR_INVALID_URL]: Invalid URL". I see env.example is empty so maybe a good start is to fill it with some dumb data or explain it. Also it speaks about "DATABASE_URL" and it would be great the type of bbdd needed and if it has a script to install it when you run the app or you need make it yourself etc etc

Thanks

Where to get Amazon s3 info?

I created an Amazon bucket but can't find where to get:

S3_UPLOAD_KEY=
S3_UPLOAD_SECRET=
S3_UPLOAD_BUCKET=
S3_UPLOAD_REGION=

where do I get these values?

For some reason I keep getting 401 Authentication error after performing "Create your studio" action

I can't understand what causes this error, I've checked the S3 bucket permissions and policies and everything seems fine.

Naming the (Studio) should be a unique

The A.I. model that is generated by the studio, is sometimes gets confused I think with other users model who have similar (Studio Names) which is very very strange ?

Is that possible ?

and if it is possible would it be better to have the studio name have a global Unique ID to avoid any crossing with other studios.

Failed to load resource: the server responded with a status of 403 (Forbidden)

I am not able to retrieve the images from my S3 bucket.
Are you using any specific IAM user permission?

Issue with verification_tokens

Hello, thanks for this great repo !!.

I've been trying to make it work and after dealing with some issues, I've been able to do a full test on dev.

Even when my .env is almost identical to .env.local I've been having issues with the not-local version.

Every time I got the email, I click over the Sign in button but instead of going to the Dashboard, like the local version, it sends me back to the Sign in to Photoshot screen.

I've truncated the table verification_tokens as a test and I can see that in the live version, a new user is generated, but no new rows on the table verification_tokens and I don't understand the reason why it's failing.

when clicking back from a preview, return to the list of runs

push new window history

Keeps loading previous photos.

Can't retrieve previous photos. keeps loading like this:

Fresh Install: Issue running migrations

`└─# yarn prisma:migrate:dev

00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'prisma:migrate:dev'
`

next not found

npm run dev

[email protected] dev
next dev

sh: 1: next: not found

on Ubuntu 22.10

possible to use with stability-ai/sdxl?

Would it be possible to replace the training model with:
https://replicate.com/stability-ai/sdxl?

Integration with Stripe works but creates payments associated with an archived product

I imagine this happens because we don't provide a specific priceId or productId (each user of the project will have its own product list on Stripe). Nevertheless this should maybe explained in the README.

(the above was taken in test-mode btw).

prevent re-render on each input change

use a react ref

SignatureDoesNotMatch: The request signature we calculated does not match the signature you provided.

anyone having this issue and know how resolve it?

Step to reproduce

• Go to the dashboard ( http://localhost:3000/dashboard )
• Upload the photos

I use AWS Root Access Key

Can Add UPI in Payment gateway (Mostly used in India)

Can Add UPI in Payment gateway (Mostly used in India)

Localhost to Online Host is must.

I am not a Back-end developer, and I never touched a docker before.

It seems that there is a major step regarding Stripe and payment to be able to connect to Replicate.

Stripe will not accept localhost:3000 as a safe domain to connect to their API,
So its a must DEPLOY the project (easy way to Vercel)

but Vercel will not be able to connect to PostgreSQL localhost:5432 ?
So you must figure out where to host that (easy way using NEON) !

I tried Amazon RDS but I couldn't get it running, so I settled with NEON.

Please if anyone got all of that running, it would be amazing to see the stack or the decisions that they have made regarding the choices.

Current Setup (No need to touch the SRC files)

1. Email Provider: AWS SES (free)
2. PAYMENT: Stripe (free)
3. S3: AWS S3 (free)
4. Replicate: Replicate (free)
5. Database (PostgreSQL) : NEON.TECH (free)
6. DEPLOY: Vercel (free)

Note: (free) is to setup and run the App, and not necessary free for production.