Adding a User Interface to ChatGPT with BeeWare — Part 2

David Such
8 min readJan 20, 2024

In Part 1 we introduced BeeWare and started laying out our GPT-4 enabled app. We will continue to build out our app in Part 2 and look at using WebViews as a renderer of content. This is not entirely straight forward, because WebView can only display http:// and https:// URLs, not file:// URLs. To serve local file content, we need to either run a web server on localhost using a background thread or just load the text content and wrap it in HTML tags.

Figure 1. Web Server with a bee inspired palette [Image Credit: Midjourney]

File Open Dialogs

The default File group menu items are File -> Close and File -> Close All. Clicking on either of these items will close the app. Most apps are going to want to open and save a file, we will add these commands to the menu bar only.

To create a command for exisiting groups use the pre-defined group names (e.g., group=toga.Group.FILE). The complete File open command definition is:

file_open_cmd = toga.Command(
self.action_open_file_dialog,
text='Open',
shortcut=toga.Key.MOD_1 + 'o',
group=toga.Group.FILE
)

Then to add this command just to the menu bar (not the toolbar):

self.commands.add(file_open_cmd)
Figure 2. The Open File Dialog

The Python code to open a readable text file (Figure 2) is fairly simple, these are two functions that we used to test File -> Open.

def load_text_file(self, file_path):
with open(file_path, 'r') as file:
return file.read()

async def action_open_file_dialog(self, widget):
try:
fname = await self.main_window.open_file_dialog("Open file with Copy Editor")
if fname is not None:
self.text_input.value = self.load_text_file(fname)
file_name_with_extension = os.path.basename(fname)
self.file_name_label.text = f"File: {file_name_with_extension}"…

--

--

David Such

Reefwing Software · Embedded Systems Engineer · iOS & AI Development · Robotics · Drones · Arduino · Raspberry Pi · Flight Control