i want to write an app with a webgui, should use react or any library which can generate in real time high UI UX level of gui and it light weight to render it fast while keeping visual high quality, the goal is to have a single html page with 1 input field of text and next to the send icon on the input fields inner right will also be an icon of a paper clip which allows to upload json files. one the user inputs text and clicks send inputing a certain need for example i want to do a todo list, and immedietly a gui of a todo list amazing reactive (IMPORTANT REACTIVE GUI) and clean UI and UX using fine lines and gradient color if needed. or if the user want to manage its expenses a spreadsheet gui will be generated for him. 
all the data input into the gui will be save in a json file in a formal template where it later can be feed back into the input of the app (using the paper clip icon) and the app will automatically create the same gui which was used before to input the data (todolist incase the user choose a todolist and weather app if the user choose to know the weather and so on for each past app the user had before).
in order to maintain a coherent line of apps the app will save the gui parameter in a json file once it created them (prior to user input of these fields for example if its a todo list a user needs the before then first the user inputs on an html with the input fields only "todo list" or "to do" then the app creates the app GUI saves its parameters in a restorable way 1:1 and displays the app to the user then the user inputs for example his grocery list clicks save and the system creates a json file and stores the users grocery list including the filename containing the parameters of the GUI of the app which is used to save them, in this example the todolist_GUI.json).
expected result, code in a single file which creates a flask server or similar (im working on ubuntu and know python to maintain the code and can use npm to install and run react) the code will be used in production to generate a page with an input fields and a small paper clip and send buttuns on its inner right border. the user will input an app request in a form of a task or need, the app will connect to an AI (provide in the code below the imports on the top 2 options one for open ai and one for ollama, make sure that for openai you take the values of OPENAI_API_KEY and OPENAI_MODEL (name) and OPENAI_API_URL and for ollama you take the values of OLLAMA_MODEL and OLLAMA_API_BASE (default http://localhost:11434) and according you a predefined spec of the prog lang we created the app and html you will have a ready instructions exactly in which format and in which structure and lang to write the app code including the endpoints where you will save the I/O to the json for a harmonic sync with your surrounding code) and to this you will add the user request. so for example if the user requested a todo app, you will take the constant design instructions which contant the prog lang libs elemtnt gui structure guidlines and all the info you wish to receive from the ai llm in the form of code to integrate into our app, get the code from the LLM and display it to the user. you will save the received code in the app folder under the app name adding 'GUI'.json and then allow user input into the fresh created and displayed app gui. the user will input/output/ work with the app and once he clicked save (or saved anything in the app regading his intreraction with the app) a json file with fields and values of the input fileds and his actions will be recorded into a json file for future use/future load by the app (prepare for load case you will have to recreate the gui and be able to query the data if user loads a json using the paper clip icon in the HomePage). next after the file is save (create if not existing append if existing never overwrite or rm) the app returns back to the home screen or the user can choose to keep working (just ask ' <FileName> for <AppName> saved Keep Editing? (Y/n)' when the user when the user clicks save (the save should be integraged with the json code we got from the llm so make sure you instruct it exactly how to I/O you-the app when he creates the code) the file with his inputs will be appended and he can choose 'y' to keep I/O or 'n' to go back to the HP where again he can input an app load a json using the load icon.
--------------
i will open ai api key, for now do write the ollama code but remark it since we will test with openai first, make sure you see the full picture and then code ,we want to eliminate the need for developers making apps since llms can generate them in real time, after all an app is a medium of I/O and its made of pixels we can deliver any app, any app in the end works with data points strings in case of todo or numeric in case of x,y cordinates of a game so basically if we display a set of the correct array of pixels to the user screen we have any app now just dealing with the input is needed. and since llms can easly deal with any calc like excel and todo and since we save and load everything from json files the llm doesnt need any past memory, we can simply feed it with the spec of the gui we have in const of the design elements, tell him we want app X with these design elements and plese send this data to this endpoint since we monitor it and when the llm send us the code for the app to display it to the user while making sure of 2 things, first handle any errors since we want a good UX and second to connect the code using the endpoint to our code allowing saving and I/O with the app.

start with writing a detailed spec where you will use (or another dev) to create this app, be detailed to the level of each lib which should be used and each way this exact app will function will behave will be coded will be combined with llm api will harmonically and beautifully provide the user with a smooth experience eliminating the need to install multiple apps. write the code in a way it could create any app, we will test simple apps at first but i expect the code to handle any I/O with the code we will get from the llm. take in mind the following options to apps users might request and when you define the constant design instructions you can use them to define the design instructions better. [app examples]notebook, browser, spreadsheet, paint, videoplayer, ftp util, file browser, music play) [/app examples].