mlx-server is not working

[tariktokic]

Hi!

I did all the steps to install mlx and mlx-audio and the UI and Server steps and whatever I try I only see

{"detail":"Not Found"} on http://127.0.0.1:8000.

This is what I can see in the terminal

(venv) ~/Developer/mlx-audio % mlx_audio.server INFO: Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit) INFO: Started parent process [41815] INFO: Started server process [41848] INFO: Started server process [41847] INFO: Waiting for application startup. INFO: Waiting for application startup. INFO: Application startup complete. INFO: Application startup complete. INFO: 127.0.0.1:61758 - "GET / HTTP/1.1" 404 Not Found INFO: 127.0.0.1:61758 - "GET / HTTP/1.1" 404 Not Found INFO: 127.0.0.1:61772 - "GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 Not Found INFO: 127.0.0.1:61773 - "GET /apple-touch-icon.png HTTP/1.1" 404 Not Found INFO: 127.0.0.1:61774 - "GET /favicon.ico HTTP/1.1" 404 Not Found INFO: 127.0.0.1:61771 - "GET / HTTP/1.1" 404 Not Found

Also starting the server in the verbose mode throws an error

(venv) ~/Developer/mlx-audio/mlx_audio/ui % mlx_audio.server --verbose usage: mlx_audio.server [-h] [--allowed-origins ALLOWED_ORIGINS [ALLOWED_ORIGINS ...]] [--host HOST] [--port PORT] [--reload RELOAD] [--workers WORKERS] mlx_audio.server: error: unrecognized arguments: --verbose

Can you please help? Thank you!

[Blaizzy]

Hey @tariktokic

I see the issue.

The UI needs to be started with npm run dev in a different tab.

Tab 1

mlx_audio.server

Tab 2

npm i npm run dev

[tariktokic]

Thank you for the fast reply @Blaizzy !

I have now two tabs as you proposed,

Tab 1

mlx_audio.server

Tab 2

npm i npm run dev

but I unfortunatelly run into next isssue, see:

(venv) ~/Developer/mlx-audio/mlx_audio/ui % npm run dev

[email protected] dev next dev

▲ Next.js 15.4.0-canary.37

• Local: http://localhost:3000
• Network: http://192.168.188.25:3000

✓ Starting... ✓ Ready in 1235ms ⚠ Cross origin request detected from 127.0.0.1 to /_next/* resource. In a future major version of Next.js, you will need to explicitly configure "allowedDevOrigins" in next.config to allow this. Read more: https://nextjs.org/docs/app/api-reference/config/next-config-js/allowedDevOrigins ○ Compiling /_not-found ... ✓ Compiled /_not-found in 1030ms (718 modules) ⨯ [TypeError: localStorage.getItem is not a function] { digest: '3838095502' } [TypeError: localStorage.getItem is not a function] ⨯ [TypeError: localStorage.getItem is not a function] (node:46238) Warning: --localstorage-file was provided without a valid path (Use node --trace-warnings ... to show where the warning was created) ✓ Compiled in 100ms (328 modules) ✓ Compiled / in 349ms (1039 modules) ✓ Compiled in 71ms (563 modules) TypeError: localStorage.getItem is not a function at new Promise () TypeError: localStorage.getItem is not a function at new Promise () ⨯ TypeError: localStorage.getItem is not a function at new Promise () TypeError: localStorage.getItem is not a function at new Promise () TypeError: localStorage.getItem is not a function at new Promise () ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () [TypeError: localStorage.getItem is not a function] ⨯ [TypeError: localStorage.getItem is not a function] { page: '/' } GET /_next/static/webpack/e135440ad9f8e4eb.webpack.hot-update.json 500 in 3243ms GET /_next/static/webpack/e135440ad9f8e4eb.webpack.hot-update.json 500 in 478ms ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload GET / 500 in 986ms [TypeError: localStorage.getItem is not a function] ⨯ [TypeError: localStorage.getItem is not a function] { page: '/' } TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {

1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { ⨯ TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { ⨯ TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { TypeError: localStorage.getItem is not a function at new Promise () TypeError: localStorage.getItem is not a function at new Promise () ⨯ TypeError: localStorage.getItem is not a function at new Promise () [TypeError: localStorage.getItem is not a function] { page: '/' } TypeError: localStorage.getItem is not a function at new Promise () ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { ⨯ TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { ⨯ TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () at Document.getInitialProps (../../src/pages/_document.tsx:1197:15) 1195 | */ 1196 | static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { 1197 | return ctx.defaultGetInitialProps(ctx) | ^ 1198 | } 1199 | 1200 | render() { TypeError: localStorage.getItem is not a function at new Promise () TypeError: localStorage.getItem is not a function at new Promise () ⨯ TypeError: localStorage.getItem is not a function at new Promise () [TypeError: localStorage.getItem is not a function] { page: '/' } TypeError: localStorage.getItem is not a function at new Promise () ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () ⨯ unhandledRejection: TypeError: localStorage.getItem is not a function at new Promise () GET / 500 in 1339ms GET / 500 in 229ms ✓ Compiled /favicon.ico in 93ms (505 modules) GET /favicon.ico 200 in 153ms

[Blaizzy]

What happens when you try to go to

http://localhost:3000/

[tariktokic]

I see 500 - Internal Server Error. The issue seems to be with the localStorage.