omi Make omi work in browser (for coding)

Is your feature request related to a problem? Please describe. When starting omi app in chrome, it does'nt work, therefore, it's much harder to build/edit it

Describe the solution you'd like Let's add an ability to run omi app in the browser, so that it's much easier to run/edit

Additional context /bounty $1500

Mar 13 '25 22:03 kodjima33

💎 $1,500 bounty • omi

Steps to solve:

Start working: Comment /attempt #2008 with your implementation plan
Submit work: Create a pull request including /claim #2008 in the PR body to claim the bounty
Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

❗ Important guidelines:

To claim a bounty, you need to provide a short demo video of your changes in your pull request
If anything is unclear, ask for clarification before starting as this will help avoid potential rework
Low quality AI PRs will not receive review and will be closed
Do not ask to be assigned unless you've contributed before

Thank you for contributing to BasedHardware/omi!

Attempt	Started (UTC)	Solution	Actions
🟢 @Rutik7066	Apr 07, 2025, 04:03:56 PM	#2164	Reward
🟢 @varshith257	Mar 13, 2025, 10:48:04 PM	WIP
🟢 @Marvellous111	Mar 13, 2025, 11:29:06 PM	WIP
🔴 @cscoderr	Mar 13, 2025, 11:10:17 PM	WIP
🟢 @oltenxyz	Mar 14, 2025, 01:23:55 AM	WIP
🟢 @Sarvesh804	Mar 14, 2025, 09:06:59 PM	WIP
🟢 @joshijoe05	Mar 17, 2025, 10:28:15 AM	WIP

Mar 13 '25 22:03 algora-pbc[bot]

@kodjima33 Yes, it's definitely possible with current stack and there's a solution. And i think we don't need React Native for now. With this i am going to mark my attempt

/attempt #2008

Algora profile	Completed bounties	Tech	Active attempts	Options
@varshith257	31 bounties from 13 projects	Scala, Rust, Go & more		Cancel attempt

Mar 13 '25 22:03 varshith257

@kodjima33 just to be clear you mean the omi apps in the marketplace? it doesn't run on the browser?

Mar 13 '25 23:03 0x-aut

@kodjima33 Just went through some docs and articles to better understand this, if it is what i believe it is then it is 100% doable, shouldn't take too long too, I'll work on it right now and see what I can do about it. lets see how it goes. /attempt #2008

Implementation plan is quite simple, port the existing flutter code for web and make it compatible with some minor changes. will get on it now.

Options

Cancel my attempt

Mar 13 '25 23:03 0x-aut

While I lack any experience with Flutter and this project, I'd like to give it a go to get a feel for it. /attempt #2008

My plan is to try to run it on Web, fix whatever platform related error comes up, rinse and repeat.

Options

Cancel my attempt

Mar 14 '25 01:03 oltenxyz

Managed to fix a few errors, but am now stuck with the Google Login flow.

I believe some changes might be required in the Google Developer Console for this to work.

Cannot find a Client ID that lets me sign in. I've tried a few.

1031333818730-1cgqp3jc5p8n2rk467pl4t56qc4lnnbr, error: Storagerelay URI is not allowed for 'NATIVE_ANDROID' client type.
1031333818730-dusn243nct6i5rgfpfkj5mchuj1qnmde, error: Storagerelay URI is not allowed for 'NATIVE_IOS' client type.
1031333818730-038eovd7osl3dlho0hp8fl87nq07nnna, error: Storagerelay URI is not allowed for 'NATIVE_IOS' client type.

Another attempt using 1031333818730-l9meebge7tpc0qmquvq6t5qpoe09o1ra actually let me finish the sign in in the Google pop up, but then the frontend errors out with this long stack trace:

frontend error after signing in

┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ [exception] | 2:47:58 739ms | An error occurred while signing in. Please try again later.
│ ClientException: {
│   "error": {
│     "code": 403,
│     "message": "People API has not been used in project 1031333818730 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730 then retry. If you enabled this
API recently, wait a few minutes for the action to propagate to our systems and retry.",
│     "status": "PERMISSION_DENIED",
│     "details": [
│       {
│         "@type": "type.googleapis.com/google.rpc.ErrorInfo",
│         "reason": "SERVICE_DISABLED",
│         "domain": "googleapis.com",
│         "metadata": {
│           "service": "people.googleapis.com",
│           "containerInfo": "1031333818730",
│           "serviceTitle": "People API",
│           "activationUrl": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730",
│           "consumer": "projects/1031333818730"
│         }
│       },
│       {
│         "@type": "type.googleapis.com/google.rpc.LocalizedMessage",
│         "locale": "en-US",
│         "message": "People API has not been used in project 1031333818730 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730 then retry. If you enabled
this API recently, wait a few minutes for the action to propagate to our systems and retry."
│       },
│       {
│         "@type": "type.googleapis.com/google.rpc.Help",
│         "links": [
│           {
│             "description": "Google developers console API activation",
│             "url": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730"
│           }
│         ]
│       }
│     ]
│   }
│ }
│ , uri=https://content-people.googleapis.com/v1/people/me?sources=READ_SOURCE_TYPE_PROFILE&personFields=photos%2Cnames%2CemailAddresses
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────

I'm not sure how to proceed here and am thinking that an admin has to create the corresponding Client ID; set up for the correct platform (web) and then share it here.

To get it working 100% will take a lot more work. However, getting to a point where you can launch the app and browse around, develop new pages, etc. should be quite possible. This will be hugely useful for working on new features without needing a mobile phone to run the app.

It would also be great to get more clarification on whether full support of all features (microphone, notifications, etc.) is required or just all the frontend pages. The OP makes it sound like the latter is more of a priority and is enough for solving this issue.

Mar 14 '25 02:03 oltenxyz

Task still actual.

@varshith257 🔴 @cscoderr 🟢 @Marvellous111 🟢 @oltenxyz 🟢 @Sarvesh804

PR by @b4s36t4 will probably be declined due to low quality (sorry)

Mar 15 '25 20:03 kodjima33

Raising a bounty to $1500 if I get a PR today

Mar 15 '25 21:03 kodjima33

Hello,

I worked on a Flutter mobile app that later expanded into Flutter Web, where I played a key role in ensuring a seamless and responsive UI/UX across devices, we have a production Flutter web app. Given my experience, I plan to try to fix this issue. I just started learning omi and MCP today after attending the Hackathon at the AGI House in San Francisco, thanks for all to organize such event, I am glad the OMI App is made with Flutter.

Looking forward to contributing! 🚀

Mar 16 '25 05:03 lutang123

Raising a bounty to $1500 if I get a PR today

Does this still stand, still working on this, will get a pr request today if that's okay, timezones are a mess for me

Mar 16 '25 08:03 0x-aut

Took another crack at it. This would definitely still take me a few days to straighten everything out nicely.

Beyond all the platform specific code in the frontend, adjustments in the backend and Google Cloud console will be needed to get this working.

The People API has to be enabled and the correct Google client ID configured for the web platform has to be setup/shared.
CORS header: the backend has to allow cross-origin requests from whatever origin the web app will be hosted at.
Alternative way to authenticate the WebSocket connection to the backend. Web compatible libraries don't have the same freedom as dart:io based ones and thus cannot set their own Authorization header when connecting to a WS. The easiest way to go about this would be a new query parameter.

Here's a peek of what it looks like on my end atm:

https://github.com/user-attachments/assets/436243e3-e058-43fb-878b-bddbbef2ba3e

Up next is playing around with flutter_web_bluetooth.

Mar 16 '25 23:03 oltenxyz

looking forward to a cool way to handle the platform-specific code.

Mar 17 '25 04:03 beastoin

@oltenxyz bro this is an amazing start

I can lock this on you if you can do daily progress

Also pls text me in telegram @kodjima33 if any issues

Mar 17 '25 06:03 kodjima33

/attempt #2008

Options

Cancel my attempt

Mar 17 '25 10:03 joshijoe05

@kodjima33 @mdmohsin7 @beastoin

I don’t have access to the Firebase project, and to get the Omi web app up and running, we need the web platform to be enabled in Firebase. Could you set that up for the dev environment and share the firebase_options.dart file with us?

Also, we’ll need the Google People API enabled for the web Google Client ID.

Once these are sorted, we can get started on making Omi work on the web ASAP. Most dependencies are already web-compatible, but a few might need some tweaking, so we’ll make sure everything is solid without breaking any existing services.

If all of this is set up, I’ll make sure to provide a basic web setup demo video quickly and then move forward with Bluetooth connection and audio streaming. Initially, I’ll focus on completing the core functionality, and later, we can revamp the UI as needed.

Mar 17 '25 17:03 joshijoe05

the firebased options, done https://github.com/BasedHardware/omi/pull/2047 / pull the latest main please.

tell me more about the Google People API, why do we need that API ?

good luck @joshijoe05

Mar 18 '25 10:03 beastoin

the firebased options, done #2047 / pull the latest main please.

tell me more about the Google People API, why do we need that API ?

good luck @joshijoe05

I created my own firebased options for web and using it to test, that's alright i believe? or do i need to make a pull?

Mar 18 '25 10:03 0x-aut

the firebased options, done #2047 / pull the latest main please.

tell me more about the Google People API, why do we need that API ?

good luck @joshijoe05

1/ ✅ 2/ To fetch the profile data like name, email and profile we need People API to be enabled for web client id.

Error log :

┌────────────────────────────────────────────────────────────────────────────────────────────────────────────── │ [exception] | 20:38:29 262ms | An error occurred while signing in. Please try again later. │ ClientException: { │ "error": { │ "code": 403, │ "message": "People API has not been used in project 1031333818730 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730 then retry. If you enabled
this API recently, wait a few minutes for the action to propagate to our systems and retry.", │ "status": "PERMISSION_DENIED", │ "details": [ │ { │ "@type": "type.googleapis.com/google.rpc.ErrorInfo", │ "reason": "SERVICE_DISABLED", │ "domain": "googleapis.com", │ "metadata": { │ "containerInfo": "1031333818730", │ "service": "people.googleapis.com", │ "serviceTitle": "People API", │ "activationUrl": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730", │ "consumer": "projects/1031333818730" │ } │ }, │ { │ "@type": "type.googleapis.com/google.rpc.LocalizedMessage", │ "locale": "en-US", │ "message": "People API has not been used in project 1031333818730 before or it is disabled. Enable it by visiting
https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730 then retry. If you enabled
this API recently, wait a few minutes for the action to propagate to our systems and retry." │ }, │ { │ "@type": "type.googleapis.com/google.rpc.Help", │ "links": [ │ { │ "description": "Google developers console API activation", │ "url": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730"
│ } │ ] │ } │ ] │ } │ } │ , uri=https://content-people.googleapis.com/v1/people/me?sources=READ_SOURCE_TYPE_PROFILE&personFields=photos%2Cnames%2CemailAddress es └──────────────────────────────────────────────────────────────────────────────────────────────────────────────

Mar 18 '25 15:03 joshijoe05

@beastoin Could you please enable the People API at the earliest? I am unable to proceed with my work until authentication is completed.

Mar 20 '25 10:03 joshijoe05

done @joshijoe05 sir

and, don't forget to lmk why do we need People API for web but not for android/ios ?

Mar 20 '25 13:03 beastoin

the firebased options, done #2047 / pull the latest main please. tell me more about the Google People API, why do we need that API ? good luck @joshijoe05

I created my own firebased options for web and using it to test, that's alright i believe? or do i need to make a pull?

@Marvellous111 it's ok, no worries.

Mar 20 '25 13:03 beastoin

@kodjima33 @beastoin The following video demonstrates my progress in migrating the Flutter app to the web. It provides a quick overview of what I’ve achieved so far. But there’s still a lot more to work on.

Some dependencies are causing issues due to platform limitations, but I’ll tackle them progressively and ensure they work smoothly

https://github.com/user-attachments/assets/bac0b33a-cf0b-4000-90e9-fece05d48fc5

Mar 20 '25 16:03 joshijoe05

@kodjima33 @beastoin The following video demonstrates my progress in migrating the Flutter app to the web. It provides a quick overview of what I’ve achieved so far. But there’s still a lot more to work on.

Some dependencies are causing issues due to platform limitations, but I’ll tackle them progressively and ensure they work smoothly

2025-03-20.22-13-37.mp4

Yo joshi, what did you use for the client id when authenticating google sign in??

Mar 20 '25 20:03 0x-aut

@beastoin @kodjima33 Could you please share the client ID? I cant find it and it is necessary for authenticating web sign in securely

Mar 20 '25 20:03 0x-aut

@kodjima33 I can fix this could you please assign this to me I will raise PR ASAP

Mar 21 '25 05:03 rutikthakre

/attempt #2008

Algora profile	Completed bounties	Tech	Active attempts	Options
@Rutik7066	12 bounties from 9 projects	Go, TypeScript, Rust & more		Cancel attempt

Mar 21 '25 05:03 rutikthakre

@beastoin @kodjima33 I completed 80% of the work, due to the size limit of github. I have uploaded the video to Youtube.

Progress Video

Mar 26 '25 09:03 rutikthakre

💡 @Rutik7066 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

Mar 26 '25 19:03 algora-pbc[bot]

https://github.com/BasedHardware/omi/pull/2014#issuecomment-2746803717 My suggestion on how to remove the frictions of adding support for a new platform to the current code base. Please leave a check.

Anyway, folks, keep using the mobile's UI for the desktop (web) version looks weird. Could you do it a bit better - sorry, my eyes got burned on your demo 😣

Mar 28 '25 03:03 beastoin

@beastoin @kodjima33 I completed 80% of the work, due to the size limit of github. I have uploaded the video to Youtube.

Progress Video

@FFmpeg is your best friend.

$ffmpeg -i ~/Downloads/x.mov -vcodec libx264 -crf 28 ~/Downloads/x.mp4

Mar 28 '25 03:03 beastoin