====== Stap 1.d: A3Dbot: Dear PyGui GUI ======

🗂️ [[start|Terug naar start]]\\


🔸 [[model-training|DearPyGui opzet]]

[[https://dearpygui-obj.readthedocs.io/en/latest/widget_list.html#:~:text=,Rich%20Plots%20Drawing%20Node%20Editor|DearPyGui-Obj Widget lijst]]\\
[[https://dearpygui.readthedocs.io/en/latest/tutorials/first-steps.html|Documentatie DPG GUI]]\\
[[https://dearpygui.readthedocs.io/en/latest/reference/dearpygui.html#dearpygui.dearpygui.theme|dearpygui.dearpygui onderdelen referentie]]\\
[[https://dearpygui.readthedocs.io/en/latest/_modules/dearpygui/dearpygui.html#add_color_button|Broncode ref.]] 




ChatGPT: Dear PyGui is een uitstekende keuze voor het maken van eenvoudige en efficiënte GUI's. Hier zijn een paar voorbeeldjes om je op weg te helpen met Dear PyGui:

1. **Installatie**:\\
Je kunt Dear PyGui installeren via pip:
<code>
pip install dearpygui
</code>

:!: **Bij problemen met gewoon installeren de onderstaande methode gebruiken**
<code>
python -m pip install dearpygui
</code>

2.**upgrade:**\\
<code>
pip install --upgrade dearpygui
</code>

3. **Een Simpele Venster**:\\
Een eenvoudig voorbeeld om een venster te creëren met een knop en een tekstveld:
<code>
   import dearpygui.dearpygui as dpg

   def on_click():
       dpg.add_text('Je hebt geklikt!', parent='main_window')

   def main():
       with dpg.handler_registry():
           dpg.add_button(label="Klik op mij", callback=on_click)

       with dpg.window(label="Hoofdvenster", id='main_window'):
           dpg.add_text("Hallo, wereld!")

       dpg.create_context()
       dpg.create_viewport(title='Eenvoudige Dear PyGui App', width=600, height=400)
       dpg.setup_dearpygui()
       dpg.run_context()
       dpg.destroy_context()

   if __name__ == "__main__":
       main()
</code>

3. **Invoerveld en Knop**:\\
Een voorbeeld van het toevoegen van een invoerveld en een knop die de invoer ophaalt:
<code>
import dearpygui.dearpygui as dpg

def get_input():
   user_input = dpg.get_value('input_field')
   dpg.add_text(f'Je hebt ingevoerd: {user_input}', parent='main_window')

def main():
   with dpg.handler_registry():
       dpg.add_button(label="Verkrijg Invoer", callback=get_input)

   with dpg.window(label="Hoofdvenster", id='main_window'):
       dpg.add_input_text(label='Voer iets in', id='input_field')

   dpg.create_context()
   dpg.create_viewport(title='Invoer Voorbeeld', width=600, height=400)
   dpg.setup_dearpygui()
   dpg.run_context()
   dpg.destroy_context()

if __name__ == "__main__":
   main()
</code>

In het eerste voorbeeld wordt een eenvoudig venster gemaakt met een tekst en een knop. Wanneer je op de knop klikt, wordt er een tekst toegevoegd aan het venster. In het tweede voorbeeld wordt een invoerveld en een knop gemaakt. Wanneer je op de knop klikt, wordt de invoer uit het invoerveld gehaald en weergegeven in het venster. 

Dear PyGui heeft een goed gedocumenteerde [GitHub repository](https://github.com/hoffstadt/DearPyGui) en [documentatie](https://dearpygui.readthedocs.io/en/latest/) die je kan helpen meer te leren over de verschillende widgets en functionaliteiten die het biedt.


----

===== Tussenfase GUI =====

Ik ben een beetje aan het experimenteren gegaan met bovenstaande informatie en heb een View gemaakt om "Dear PyGui" uit te proberen. Hieronder het resultaat. Note de callbacks staan in een aparte Class die ik er onder heb gezet. De start methode van de A3DGUI wordt gestart vanuit mijn app.py wat het start script is.

<code>
from a3dcontroler import A3DControler
import dearpygui.dearpygui as dpg

class A3DGUI:
    def __init__(self):
        self.a3dcon = A3DControler()

    def start(self):    
        dpg.create_context()

        with dpg.font_registry():
            default_font = dpg.add_font("a3d_incl\\Arial.ttf", 18)
            dpg.bind_font(default_font)

        # Maak een venster genaamd "A3D Embeddings" en stel de breedte en hoogte in ========================================
        with dpg.window(label="A3D Embeddings", width=1006, height=1100 )as win1:
            # Voeg een menubalk toe aan het venster ========================================================================
            with dpg.menu_bar():
                with dpg.menu(label="Opties"):
                    dpg.add_menu_item(label="Optie 1", tag="optie_1", callback = self.a3dcon.menucall)
                    dpg.add_menu_item(label="Optie 2", tag="optie_2", callback = self.a3dcon.menucall)
                   
            # Voeg een tabbladbalk toe aan het venster =====================================================================
            with dpg.tab_bar():
                # Voeg een tabblad toe genaamd "Nieuwe Embedding"
                with dpg.tab(label=" Nieuwe Embedding "):
                    # Maak een keuzelijst met items
                    items = ["Item 1", "Item 2", "Item 3"]
                    dpg.add_combo(items=items, label="Maak een keuze", callback = self.a3dcon.combo_callback) 
                    # Voeg een tekstwidget toe
                    dpg.add_text("Trace:", color=(126, 185, 225))    
                    # Voeg een tekstinvoerwidget toe             
                    dpg.add_input_text(label="", multiline=True, readonly=True, tag="response_text", width=-1, height=100)
                    # Voeg een tekstwidget toe
                    dpg.add_text("Te versturen tekst:", color=(126, 185, 225))
                    # Voeg een tekstinvoerwidget toe
                    dpg.add_input_text(label="", multiline=True, tag="input_text", width=-1, height=750) 
                    # Voeg knoppen toe om invoer te verzenden en te wissen in een horizontale groep 
                    with dpg.group(horizontal=True):
                        # Voeg een knop toe genaamd "Versturen" die de callback "send_data" aanroept in de a3dcontroler
                        dpg.add_button(label=" Versturen ", callback=self.a3dcon.send_data)
                        # Voeg een knop toe genaamd "Tekst velden wissen" die de callback "clear_text_fields" aanroept 
                        dpg.add_button(label=" Tekst velden wissen ", callback=self.a3dcon.clear_text_fields)

                # Voeg een tabblad toe genaamd "ChatTesten" ==================================================================      
                with dpg.tab(label=" ChatTesten "):
                    dpg.add_input_text(label="", multiline=True, readonly=True, tag="response_text2", width=-1, height=150)  

                # Voeg een tabblad toe genaamd "Bewerken" ====================================================================
                with dpg.tab(label=" Bewerken "):
                    dpg.add_input_text(label="", multiline=True, readonly=True, tag="response_text3", width=-1, height=50)       

        dpg.create_viewport(title='AI need Py space', width=1600, height=1200)     
        dpg.setup_dearpygui()
        dpg.show_viewport()
        dpg.start_dearpygui()
        dpg.destroy_context()
</code>

=== Controler Class ===

<code>
import dearpygui.dearpygui as dpg
from a3dmodel import A3DModel
from a3dapi import A3DApi

class A3DControler:
    def __init__(self):
        self.a3dmod = A3DModel()
        self.a3dapi = A3DApi(self, self.a3dmod)
        
    # Callback voor "Opties" menu =================================
    def menucall( self, sender, app_data ):
        print( self )
        print( sender )
        input_text = dpg.get_value( "input_text" )
        # Jouw code om data te versturen en op te slaan
        dpg.set_value( "response_text", f"{sender}" )

    # Callbacks voor "Embeddings" tab ==============================
    # Callback voor "Combo" box
    def combo_callback(self, sender, app_data):
            input_text = dpg.get_value(sender)
            old_text = dpg.get_value( "response_text" )
            new_text = input_text + "\n" + old_text
            dpg.set_value( "response_text", new_text )

    # Knoppen ========================================
    # Callback voor "Tekst velden wissen" button
    def clear_text_fields( self, sender, app_data ):
        dpg.set_value( "input_text", " ")
        dpg.set_value( "response_text", "" )

    # Callbacks voor "Versturen" knop  
    def send_data( self, sender, app_data ):
        print( self.a3dmod.api_openai_key )
        input_text = dpg.get_value( "input_text" )
        old_text = dpg.get_value( "response_text" )
        new_text = input_text + "\n" + old_text
        dpg.set_value( "response_text", new_text )  

</code>


----