Stap 1.d: A3Dbot: Dear PyGui GUI
⇐ Terug naar start
← – Terug naar A3Dbot Start
← – – Terug naar testomgeving opzetten start
DearPyGui-Obj Widget lijst
Documentatie DPG GUI
dearpygui.dearpygui onderdelen referentie
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:
pip install dearpygui
Bij problemen met gewoon installeren de onderstaande methode gebruiken
python -m pip install dearpygui
2.upgrade:
pip install --upgrade dearpygui
3. Een Simpele Venster:
Een eenvoudig voorbeeld om een venster te creëren met een knop en een tekstveld:
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()
3. Invoerveld en Knop:
Een voorbeeld van het toevoegen van een invoerveld en een knop die de invoer ophaalt:
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()
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.
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()
Controler Class
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 )