A3D Wiki

Gebruikershulpmiddelen

Site-hulpmiddelen

Spoor:
stap_1_d

Verschillen

Dit geeft de verschillen weer tussen de geselecteerde revisie en de huidige revisie van de pagina.

Link naar deze vergelijking

Beide kanten vorige revisieVorige revisie
Volgende revisie		Vorige revisie
stap_1_d [2023/10/03 06:36] – a3dijkestap_1_d [2024/07/17 19:58] (huidige) – oude revisie hersteld (2024/07/08 15:05) a3dijke
Regel 1: Regel 1:
 ====== Stap 1.d: A3Dbot: Dear PyGui GUI ====== ====== Stap 1.d: A3Dbot: Dear PyGui GUI ======
  
-<= [[start|Terug naar start]]\\ +🗂️ [[start|Terug naar start]]\\
-<- -- [[projecten|Terug naar A3Dbot Start]]\\ +
-<- -- -- [[a3d_bot_testomgeving|Terug naar testomgeving opzetten 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/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/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.]] 
-https://dearpygui.readthedocs.io/en/latest/_modules/dearpygui/dearpygui.html#add_color_button|Broncode ref.]] +
  
  
Regel 18: Regel 19:
 Je kunt Dear PyGui installeren via pip: Je kunt Dear PyGui installeren via pip:
 <code> <code>
-   pip install dearpygui+pip install dearpygui
 </code> </code>
  
-2. **Een Simpele Venster**:\\+:!: **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: Een eenvoudig voorbeeld om een venster te creëren met een knop en een tekstveld:
 <code> <code>
Regel 77: Regel 88:
  
  
 +----
  
 +===== 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>
  
  
 ---- ----
 +
  
stap_1_d.1696307815.txt.gz · Laatst gewijzigd: 2023/10/03 06:36 door a3dijke