Building a PyQt5 GUI with Flask Backend Integration

PyQt5 provides comprehensive tools for creating desktop applications with graphical user interfaces. The following example demonstrates a PyQt5 client that communicates with a Flask backend server.
Client Implementation
import sys
import requests
from PyQt5.QtWidgets import (QApplication, QWidget, QGridLayout,
                             QLabel, QLineEdit, QPushButton, QRadioButton, QCheckBox,
                             QComboBox, QSlider, QProgressBar, QMessageBox, QTextEdit)
from PyQt5.QtCore import Qt


class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setup_interface()

    def setup_interface(self):
        layout = QGridLayout()

        # User input section
        user_label = QLabel("Username:")
        self.username_field = QLineEdit()
        layout.addWidget(user_label, 0, 0)
        layout.addWidget(self.username_field, 0, 1)

        # Rich text editor
        editor_label = QLabel("Details:")
        self.details_editor = QTextEdit()
        self.details_editor.setAcceptRichText(True)
        layout.addWidget(editor_label, 1, 0)
        layout.addWidget(self.details_editor, 1, 1)

        # Text manipulation buttons
        extract_btn = QPushButton("Extract HTML", self)
        extract_btn.clicked.connect(self.extract_html_content)
        layout.addWidget(extract_btn, 2, 0)

        insert_btn = QPushButton("Insert HTML", self)
        insert_btn.clicked.connect(self.insert_html_content)
        layout.addWidget(insert_btn, 2, 1)

        # Radio button group
        option_a = QRadioButton("Selection A")
        option_b = QRadioButton("Selection B")
        option_b.setChecked(True)
        layout.addWidget(option_a, 3, 0)
        layout.addWidget(option_b, 3, 1)

        # Checkbox
        consent_box = QCheckBox("Accept terms")
        consent_box.setChecked(True)
        layout.addWidget(consent_box, 4, 0, 1, 2)

        # Dropdown menu
        choice_menu = QComboBox()
        choice_menu.addItems(["Alpha", "Beta", "Gamma"])
        layout.addWidget(choice_menu, 5, 0, 1, 2)

        # Slider control
        value_slider = QSlider(Qt.Horizontal)
        value_slider.setRange(0, 100)
        value_slider.setValue(50)
        layout.addWidget(value_slider, 6, 0, 1, 2)

        # Progress indicator
        status_bar = QProgressBar()
        status_bar.setValue(75)
        layout.addWidget(status_bar, 7, 0, 1, 2)

        # Action buttons
        fetch_btn = QPushButton("Retrieve Data")
        send_btn = QPushButton("Send Data")
        fetch_btn.clicked.connect(self.retrieve_data)
        send_btn.clicked.connect(self.transmit_data)

        button_row = QHBoxLayout()
        button_row.addWidget(fetch_btn)
        button_row.addWidget(send_btn)
        layout.addLayout(button_row, 8, 0, 1, 2)

        self.setLayout(layout)

    def retrieve_data(self):
        try:
            api_response = requests.get('http://localhost:5000/api/data')
            server_data = api_response.json()
            QMessageBox.information(self, "Server Response", 
                                  f"Service: {server_data['service']}, Release: {server_data['release']}")
        except Exception as e:
            QMessageBox.warning(self, "Error", f"Failed to connect: {str(e)}")

    def transmit_data(self):
        payload = {
            'username': self.username_field.text(),
            'details': self.details_editor.toHtml()
        }
        try:
            api_response = requests.post('http://localhost:5000/api/submit', json=payload)
            result = api_response.json()
            QMessageBox.information(self, "Submission Status", 
                                  f"Result: {result['result']}, Info: {result['info']}")
        except Exception as e:
            QMessageBox.warning(self, "Error", f"Failed to submit: {str(e)}")

    def extract_html_content(self):
        html_data = self.details_editor.toHtml()
        print("Extracted HTML:", html_data)

    def insert_html_content(self):
        sample_html = """
        <h2>Sample Content</h2>
        <p>This demonstrates <em>formatted</em> text in QTextEdit.</p>
        <ul>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ul>
        <p style='color:green;'>Green highlighted text.</p>
        """
        self.details_editor.setHtml(sample_html)


if __name__ == '__main__':
    application = QApplication(sys.argv)
    window = MainWindow()
    window.setWindowTitle("PyQt5-Flask Demo")
    window.show()
    sys.exit(application.exec_())
Flask Backend Service
import json
from flask import Flask, request, jsonify

server = Flask(__name__)


@server.route('/api/data', methods=['GET'])
def fetch_data():
    response_data = {
        "service": "Backend API",
        "release": "2.0.1",
        "status": "operational"
    }
    return jsonify(response_data)


@server.route('/api/submit', methods=['POST'])
def handle_submission():
    received_data = json.loads(request.data)
    print("Received payload:", received_data)
    
    # Process data here...
    
    return jsonify({
        "result": "processed",
        "info": "data received successfully"
    })


if __name__ == '__main__':
    server.run(port=5000, debug=True)

Tags: PyQt5 Flask GUI Development python HTTP Client

Posted on Wed, 13 May 2026 20:06:44 +0000 by jthomp7