abi / screenshot-to-code

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

Home Page:https://screenshottocode.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

generateCode.ts:23 WebSocket connection to 'ws://127.0.0.1:7001/generate-code' failed:

DaihuaWei opened this issue · comments

1、Already configurate the VITE_WS_BACKEND_URL:
image
2、curl http://192.168.1.52:7001 is OK, like this:Your backend is running correctly. Please open the front-end URL (default is http://localhost:5173) to use screenshot-to-code.
3、http://192.168.1.52:5173/,
image
4、when I upload one video or image,the process interface is 127.0.0.1:7001,like this:
image
5、I don't know what's wrong? hope your help

Hi, thanks for the clear walkthrough of your steps. All you need to do is update the frontend .env. See https://github.com/abi/screenshot-to-code?tab=readme-ov-file#%EF%B8%8F-faqs "How can I update the backend host that my front-end connects to?"

Please close the ticket once you confirm that it works for you.

Hi, thanks for the clear walkthrough of your steps. All you need to do is update the frontend .env. See https://github.com/abi/screenshot-to-code?tab=readme-ov-file#%EF%B8%8F-faqs "How can I update the backend host that my front-end connects to?"

According to your guidance, I do like this:
1、In front docker container, change the VITE_WS_BACKEND_URL=ws://192.168.1.152:7001 to VITE_HTTP_BACKEND_URL=http://192.168.1.52:7001
2、then restart the front and backend container
3、But the result is same as bellow, like this:
image

I missing something or doing something wrong, hope your help, thank you

I found in the front , no .env.local file
image

only can configurate the .env.example
image

according the guidance , Do I need to create this file .env.local

Yes, you have to create it.

Alternatively you can update directly in code here:

export const WS_BACKEND_URL =

Let me know if that solves your problem!

The address is ok,but use OPENAI_API_KEY cann't process the video ,prompt me configurate the ANTHROPIC_API_KEY,like this:
image

when I upload one photo .png,seems ok,but An error was reported after a while, like this:
image

Yes, for videos, you need a ANTHROPIC_API_KEY that you'll add to backend/.env

When you upload a PNG like that, what do the backend logs look like?

When upload PNG, The backend logs like this:
image
image

@DaihuaWei You're not able to connect to the OpenAI API. Is OpenAI banned in your country? Please see FAQs "How can I configure an OpenAI proxy?" https://github.com/abi/screenshot-to-code?tab=readme-ov-file#%EF%B8%8F-faqs

Closing due to inactivity