Allow using camera as input on mobile with gpt-4 vision

[mingming-ma]

Fix #282

Status

Tasks

• Optimize the image locally so upload is faster -> Will be tracked by Resize the image in the browser within the max size of the image that OpenAI will process #395
• There's a lot of horizontal scrolling on mobile (might be unrelated to this PR)
  -> Will be fixed by new menu component, see result from Allow using images as input with gpt-4 vision #286
• The icon on mobile should probably be a camera -> Changed to Options -> Attach Files ...
• Support the camera use case, but also attaching a photo from the camera roll

[sweep-ai]

Apply Sweep Rules to your PR?

• Apply: All new business logic should have corresponding unit tests.
• Apply: Refactor large functions to be more modular.
• Apply: Add docstrings to all functions and file headers.

[humphd]

This branch cannot be rebased due to conflicts

Same issue here.

Tested this with other users, and their feedback was:

1. Optimize the image locally so upload is faster
2. There's a lot of horizontal scrolling on mobile (might be unrelated to this PR)
3. The icon on mobile should probably be a camera
4. Support the camera use case, but also attaching a photo from the camera roll

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	fa1a542
Status:	✅  Deploy successful!
Preview URL:	https://1dba1606.console-overthinker-dev.pages.dev
Branch Preview URL:	https://issue-282.console-overthinker-dev.pages.dev

View logs

[tarasglek]

edit, nm saw other issue

[mingming-ma]

@humphd Just tested mobile version and sending images works well.

Since the Attach button is moved to the Options button, I removed the mobile view's Camera button, and user can add photos or take pictures from the Options button -> Attach Files.... and update the UI if needed in follow up PRs, Sounds good?

[humphd]

That makes sense. When we start supporting other image types, we might want to separate "use camera" from "attach image", but let's wait.

[WangGithub0]

Looks good.
photo library, take phone, choose files all work perfect.

[humphd]

This is so, so cool! Just used it to take a picture of hand-written notes in order to get text. 💯