abi / screenshot-to-code

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
https://screenshottocode.com
MIT License
63.82k stars 7.8k forks source link

An Error Occurs While Running 'backend' #370

Closed wdEffort closed 4 months ago

wdEffort commented 4 months ago

After navigating to the 'backend' directory and using poetry to run the application, the following message is displayed:

(backend-py3.10) [root@localdev backend]# poetry run uvicorn main:app --reload --port 7001
INFO:     Will watch for changes in these directories: ['/home/jnsinc/screenshot-to-code/backend']
INFO:     Uvicorn running on http://127.0.0.1:7001 (Press CTRL+C to quit)
INFO:     Started reloader process [25338] using StatReload
Process SpawnProcess-1:
Traceback (most recent call last):
  File "/root/.pyenv/versions/3.10.4/lib/python3.10/multiprocessing/process.py", line 315, in _bootstrap
    self.run()
  File "/root/.pyenv/versions/3.10.4/lib/python3.10/multiprocessing/process.py", line 108, in run
    self._target(*self._args, **self._kwargs)
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/uvicorn/_subprocess.py", line 76, in subprocess_started
    target(sockets=sockets)
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/uvicorn/server.py", line 61, in run
    return asyncio.run(self.serve(sockets=sockets))
  File "/root/.pyenv/versions/3.10.4/lib/python3.10/asyncio/runners.py", line 44, in run
    return loop.run_until_complete(main)
  File "/root/.pyenv/versions/3.10.4/lib/python3.10/asyncio/base_events.py", line 646, in run_until_complete
    return future.result()
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/uvicorn/server.py", line 68, in serve
    config.load()
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/uvicorn/config.py", line 467, in load
    self.loaded_app = import_from_string(self.app)
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/uvicorn/importer.py", line 24, in import_from_string
    raise exc from None
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/uvicorn/importer.py", line 21, in import_from_string
    module = importlib.import_module(module_str)
  File "/root/.pyenv/versions/3.10.4/lib/python3.10/importlib/__init__.py", line 126, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 1050, in _gcd_import
  File "<frozen importlib._bootstrap>", line 1027, in _find_and_load
  File "<frozen importlib._bootstrap>", line 1006, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 688, in _load_unlocked
  File "<frozen importlib._bootstrap_external>", line 883, in exec_module
  File "<frozen importlib._bootstrap>", line 241, in _call_with_frames_removed
  File "/home/jnsinc/screenshot-to-code/backend/main.py", line 9, in <module>
    from routes import screenshot, generate_code, home, evals
  File "/home/jnsinc/screenshot-to-code/backend/routes/generate_code.py", line 27, in <module>
    from video.utils import extract_tag_content, assemble_claude_prompt_video
  File "/home/jnsinc/screenshot-to-code/backend/video/utils.py", line 9, in <module>
    from moviepy.editor import VideoFileClip  # type: ignore
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/moviepy/editor.py", line 24, in <module>
    import imageio
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/imageio/__init__.py", line 24, in <module>
    from .core import FormatManager, RETURN_BYTES
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/imageio/core/__init__.py", line 13, in <module>
    from .findlib import load_lib
  File "/root/.cache/pypoetry/virtualenvs/backend-6mdfTxZj-py3.10/lib/python3.10/site-packages/imageio/core/findlib.py", line 10, in <module>
    import ctypes
  File "/root/.pyenv/versions/3.10.4/lib/python3.10/ctypes/__init__.py", line 8, in <module>
    from _ctypes import Union, Structure, Array
ModuleNotFoundError: No module named '_ctypes'

Could you please help me resolve this issue?

[Reference]

abi commented 4 months ago

Seems like the issue is with the moviepy (and imageio) install on your machine.

ChatGPT has a suggestion that's worth trying out: https://chatgpt.com/share/8f4f8836-8c1d-4275-9135-47db33e17936

Let me know if it fixes it.

wdEffort commented 4 months ago

@abi
Thank you for your reply.

By referring to the solution provided, I was able to run 'backend' normally (see image below).

screenshot

In addition, node.js, npm, and yarn were additionally installed through 'nvm' installation on the server in the RedHat 9.4 OS environment, and 'frontend' was run normally.

However, I have four additional questions as listed below.

  1. Can I specify a port when running ‘Backend’ and ‘Frontend’?
    • For example, 'backend' is '7002' and 'frontend' is '80'.
  2. Is there a way to connect to the Apache web server?
  3. Can I ignore the warning message below when using the 'poetry install' command?
    WARNING: The current project cannot be installed. File/folder not found for package backend.
    Use --no-root if you do not want to install the current project.
    If you want to use Poetry only for dependency management and not for packaging, you can disable package mode by setting package-mode = false in your pyproject.toml file.
    This warning will be an error in future versions of Poetry!
  4. What does the ERROR phrase below ‘when running frontend’ mean?
    ERROR
    [TypeScript] Found 0 errors. Watching for file changes.
abi commented 4 months ago

Is the app working for you? Are you able to put in a screenshot and generate some code?

  1. Yes, you can pass in CLI arguments or modify the code to update the ports
  2. Not sure what you mean. @Jonathan-Adly wrote up some instructions on hosting this yourself: https://jonathanadly.com/securing-your-self-hosted-open-source-ai-application
  3. Yes, you can ignore this warning.
  4. You can ignore this as well.
wdEffort commented 4 months ago

@abi Thank you for your reply.

Currently, the app is running normally and can be accessed and used externally.

To resolve the above issue, I followed these steps:

  1. Run the 'backend'

    • I used the 'poetry run' command on the server.
      • Additionally, I added the '--host=0.0.0.0' option to allow external access to the app. 1_run_BE
  2. Made some modifications to the 'src/config.ts' and 'vite.config.ts' files in the 'frontend'.

    • Modified the src/config.ts file
      • Referred to FAQs for the modifications. 2_FE_src_config
    • Modified the vite.config.ts file
      • Added the 'server' configuration to allow external access to the app. 3_FE_vite_config
  3. Run the 'frontend'

    • Executed 'yarn' and 'yarn dev' commands sequentially on the server. 4_run_FE
  4. Access the app and run it by uploading an image

    • I was able to confirm that the AI analyzes the image and generates code as shown below. 5_test_result

💡 Please note that I do not have knowledge of Python and React. However, I resolved this issue based on previous responses and my personal research. I appreciate your understanding if there are any shortcomings in the process. 💡 Additionally, please note that the above content is a translation of the original content written in Korean.

Since this issue has been resolved, I will mark it as 'closed'.(if that is appropriate for me to do...😳).

abi commented 4 months ago

@wdEffort This is awesome, thanks for the detailed write-up. I'll use this to improve the README.