====== Gradio UI voor Python ======
<= [[start|Terug naar start]]\\
<- -- [[ai-ki|Terug naar AI: Kunstmatige Intelligentie Start]]

-> [[huggingface|Huggingface]]

-> [[stap_1_a|A3Dbot: Gradio]]

-> [[gradio_project|Gradio project (1)]]

[[https://www.gradio.app/|Gradio is een open-source bibliotheek]] die het mogelijk maakt om interactieve machine learning modellen te bouwen en te delen. Het biedt een eenvoudige manier om modellen te bouwen en te delen met anderen, allemaal in Python. Gradio biedt een scala aan mogelijkheden om de look en feel van je app aan te passen.

----

[[https://www.gradio.app|Gradio quickstart]]\\
[[https://www.gradio.app/docs/interface|Gradio Docs.]]\\
[[https://huggingface.co/spaces/ysharma/ChatGPT4|GPT4 using Chat-Completions API & Gradio-Streaming]]

----


===== Installeren =====
**Pip:**\\
Python update PIP //(regelmatig uitvoeren)//:
<code>
python -m pip install -U pip
</code>
<code>
pip install gradio
</code>
**Update/Upgrade naar de laatste versie:**
<code>
pip install --upgrade gradio
</code>
**Applicatie starten:**\\
> When developing locally, if you want to run the code as a Python script, you can use the Gradio CLI to launch the application in reload mode, which will provide seamless and fast development. Learn more about reloading in [[https://www.gradio.app/guides/developing-faster-with-reload-mode|the Auto-Reloading Guide]].
<code>
gradio app.py
</code>
**Je kunt ook de app starten zonder Auto-Reloading:**
<code>
python app.py
</code>
**Je App delen met anderen -> publiekelijk:**
<code>
demo.launch(share=True)
</code>

----

===== Integratie en Delen =====
=== Gradio UI voor Python ===

Gradio kan worden ingebed in Python notebooks of als een aparte webpagina worden gepresenteerd. Het kan automatisch een openbare link genereren die u kunt delen, waardoor anderen op afstand met het model op uw computer kunnen interageren.

===== Permanente Hosting =====
Eenmaal gecreëerd, kan de interface permanent worden gehost op [[https://huggingface.co/spaces|Hugging Face Spaces]], waardoor u een deelbare link krijgt.

===== Thema's =====
=== Gradio UI voor Python ===

Je kunt kiezen uit verschillende thema’s of je eigen thema’s maken. Om dit te doen, geef je de //theme=// parameter door aan de //Blocks// of //Interface// constructor. Je kunt bijvoorbeeld het volgende doen:

<code>
import gradio as gr

with gr.Blocks(theme=gr.themes.Soft()) as demo:
    ...
</code>
Gradio wordt geleverd met een set vooraf gebouwde thema’s die je kunt laden vanuit //gr.themes//.*. Deze zijn:
<code>
gr.themes.Base()
gr.themes.Default()
gr.themes.Glass()
gr.themes.Monochrome()
gr.themes.Soft()
</code>
Elk van deze thema’s stelt waarden in voor honderden CSS-variabelen. Je kunt vooraf gebouwde thema’s gebruiken als startpunt voor je eigen aangepaste thema’s, of je kunt je eigen thema’s vanaf nul maken.

Gradio biedt ook een ingebouwde themabuilder waarmee je gemakkelijk thema’s kunt bouwen. Om de Theme Builder lokaal te starten, voer je de volgende code uit:
<code>
import gradio as gr

gr.themes.builder()
</code>
Je kunt de [[https://www.gradio.app/guides/theming-guide|Theme Builder]] ook gebruiken die op Spaces draait, hoewel deze veel sneller werkt wanneer je deze lokaal start via //gr.themes.builder()//. Terwijl je de waarden in de Theme Builder bewerkt, wordt de app in realtime bijgewerkt. Je kunt de code downloaden om het thema dat je hebt gemaakt te genereren, zodat je het in elke Gradio-app kunt gebruiken.

----

===== Basis set-up =====

Een werkende basis app met Gradio\\
Versiabelen "HF_TOKEN" en "OPENAI_API_KEY" in een .env bestand

<code>
pip install gradio
</code>
<code>
pip install openai
</code>
<code>
pip install python-dotenv
</code>

**app.py:**
<code>
import os
import gradio as gr
from dotenv import load_dotenv
import openai

load_dotenv()

def main():
    print(os.getenv("HF_TOKEN"))
    print(os.getenv("OPENAI_API_KEY"))

def chat(message, history):
    # verstuur boodschapnaar chatbot en ontvang antwoord van chatbot
    openai.api_key = os.getenv("OPENAI_API_KEY")
    response = openai.Completion.create(
        engine="davinci",
        prompt=message,
        temperature=0.4,
        max_tokens=150,
        top_p=1,
        frequency_penalty=0,
        presence_penalty=0.6,
        stop=["\n", " Human:", " AI:"]
    )
    reactie = response["choices"][0]["text"]
    return reactie

if __name__ == "__main__":
    main()
    # gr.ChatInterface(fn=chat).launch(share=True)
    gr.ChatInterface(fn=chat).launch()
</code>

----


===== Links =====
  * [[https://www.gradio.app/|Gradio home]]
  * [[https://www.gradio.app/guides/quickstart|Gradio quickstart]]
  * [[https://www.gradio.app/docs/interface|Gradio docs]]
  * [[https://www.gradio.app/guides/theming-guide|Theming gids]]
  * [[https://www.gradio.app/guides|Gidsen]]
  * [[https://www.gradio.app/demos|Demo's]]
  * **[[https://www.gradio.app/guides/sharing-your-app|Je App delen met anderen]]**
    * [[https://www.gradio.app/guides/running-gradio-on-your-web-server-with-nginx|Gradio op je eigen webserver draaien]]
    * [[https://huggingface.co/spaces|Huggingface Spaces]]
  * [[https://www.freecodecamp.org/news/build-gui-using-gradio-for-machine-learning-models/|How to Build a GUI Using Gradio for Machine Learning Models]]
  * **[[https://www.youtube.com/watch?v=eE7CamOE-PA|Video: Gradio Crash Course - Fastest way to build & share Machine Learning apps]]**
  * [[https://huggingface.co/spaces/ysharma/ChatGPT4|HUGGINGFACE: GPT4 using Chat-Completions API & Gradio-Streaming]]

----