PhillipRt / mistral-playground

UI Playground for the Mistral API
https://philliprt.github.io/mistral-playground/
Apache License 2.0
0 stars 0 forks source link

I tried to run but it don't accept API key? #2

Open jamiecropley opened 8 months ago

jamiecropley commented 8 months ago

I tried to run but it don't accept API key?

PhillipRt commented 8 months ago

That is due to there CORS policy, I tried to contact them about the issue but have not heard back.

As a workaround, you can deactivate cors in your browser https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome

jamiecropley commented 8 months ago

Yeah this is usually because you don't run it on a web server, easiest solution I find for that is that you do basic web server in python via command python -m http.server 8000 then just go to : http://127.0.0.1:8000 in browser and it should work but then getting rid of the CORS issue it still don't resolve the issues with the code. I am still looking into this though this usually fixes it for me:

Access to fetch at 'https://api.mistral.ai/v1/models' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. script.js:36

   GET https://api.mistral.ai/v1/models net::ERR_FAILED

fetchModels @ script.js:36 (anonymous) @ script.js:192 script.js:48 Error: TypeError: Failed to fetch at fetchModels (script.js:36:9) at HTMLButtonElement. (script.js:192:9) (anonymous) @ script.js:48 Promise.catch (async) fetchModels @ script.js:47 (anonymous) @ script.js:192

but I still get these errors doing that.... its usually always the fact not loaded it onto a web server though I find with CORS policy error next I tried to upload your project to vercel...

This then surprisingly gives errors:

Failed to load resource: the server responded with a status of 404 () mistral-playground-hdxwuv6q7-jamiecropleyai.vercel.app/:1 Access to fetch at 'https://api.mistral.ai/v1/models' from origin 'https://mistral-playground-hdxwuv6q7-jamiecropleyai.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. script.js:36

   GET https://api.mistral.ai/v1/models net::ERR_FAILED

fetchModels @ script.js:36 (anonymous) @ script.js:192 script.js:48 Error: TypeError: Failed to fetch at fetchModels (script.js:36:9) at HTMLButtonElement. (script.js:192:9)

a solution going forwards, check out 11ty, this way you can embed the mistral library via node and still keep most your code in tact I reckon that's a good way forwards, what I think is happening is accessing the API is not working as its just a index.html file and JS file and usually these things don't work well unless you use a framework of sorts. What I will do, I am gonna start a new project from scratch I reckon...