From d41a08c627ffb1898ea7ae42f6acac4d0d8b5290 Mon Sep 17 00:00:00 2001 From: Jared Van Bortel Date: Mon, 24 Feb 2025 12:38:53 -0500 Subject: [PATCH] improve UI layout Signed-off-by: Jared Van Bortel --- gpt4all-chat/qml/AddRemoteModelView.qml | 33 +++++++++---------- gpt4all-chat/qml/RemoteModelCard.qml | 43 ++++++++++++++----------- 2 files changed, 40 insertions(+), 36 deletions(-) diff --git a/gpt4all-chat/qml/AddRemoteModelView.qml b/gpt4all-chat/qml/AddRemoteModelView.qml index 16de46ec..75d5d4df 100644 --- a/gpt4all-chat/qml/AddRemoteModelView.qml +++ b/gpt4all-chat/qml/AddRemoteModelView.qml @@ -39,25 +39,26 @@ ColumnLayout { ScrollBar.vertical.policy: ScrollBar.AsNeeded Layout.fillWidth: true Layout.fillHeight: true + contentWidth: availableWidth clip: true - GridLayout { - rows: 2 - columns: 3 - rowSpacing: 20 - columnSpacing: 20 + Flow { + anchors.left: parent.left + anchors.right: parent.right + spacing: 20 + bottomPadding: 20 + property int childWidth: 330 * theme.fontScale + property int childHeight: 400 + 166 * theme.fontScale RemoteModelCard { - Layout.preferredWidth: 600 - Layout.minimumHeight: 700 - Layout.alignment: Qt.AlignTop | Qt.AlignLeft + width: parent.childWidth + height: parent.childHeight providerBaseUrl: "https://api.groq.com/openai/v1/" providerName: qsTr("Groq") providerImage: "qrc:/gpt4all/icons/groq.svg" providerDesc: qsTr('Groq offers a high-performance AI inference engine designed for low-latency and efficient processing. Optimized for real-time applications, Groq’s technology is ideal for users who need fast responses from open large language models and other AI workloads.

Get your API key: https://groq.com/') } RemoteModelCard { - Layout.preferredWidth: 600 - Layout.minimumHeight: 700 - Layout.alignment: Qt.AlignTop | Qt.AlignLeft + width: parent.childWidth + height: parent.childHeight providerBaseUrl: "https://api.openai.com/v1/" providerName: qsTr("OpenAI") providerImage: "qrc:/gpt4all/icons/openai.svg" @@ -73,18 +74,16 @@ ColumnLayout { } } RemoteModelCard { - Layout.preferredWidth: 600 - Layout.minimumHeight: 700 - Layout.alignment: Qt.AlignTop | Qt.AlignLeft + width: parent.childWidth + height: parent.childHeight providerBaseUrl: "https://api.mistral.ai/v1/" providerName: qsTr("Mistral") providerImage: "qrc:/gpt4all/icons/mistral.svg" providerDesc: qsTr('Mistral AI specializes in efficient, open-weight language models optimized for various natural language processing tasks. Their models are designed for flexibility and performance, making them a solid option for applications requiring scalable AI solutions.

Get your API key: https://mistral.ai/') } RemoteModelCard { - Layout.preferredWidth: 600 - Layout.minimumHeight: 700 - Layout.alignment: Qt.AlignTop | Qt.AlignLeft + width: parent.childWidth + height: parent.childHeight providerIsCustom: true providerName: qsTr("Custom") providerImage: "qrc:/gpt4all/icons/antenna_3.svg" diff --git a/gpt4all-chat/qml/RemoteModelCard.qml b/gpt4all-chat/qml/RemoteModelCard.qml index c96929d1..f7e8d4fb 100644 --- a/gpt4all-chat/qml/RemoteModelCard.qml +++ b/gpt4all-chat/qml/RemoteModelCard.qml @@ -20,7 +20,7 @@ import localdocs Rectangle { property alias providerName: providerNameLabel.text property alias providerImage: myimage.source - property alias providerDesc: providerDescLabel.helpText + property alias providerDesc: providerDescLabel.text property string providerBaseUrl: "" property bool providerIsCustom: false property var filterModels: function(names) { @@ -31,7 +31,7 @@ Rectangle { radius: 10 border.width: 1 border.color: theme.controlBorder - implicitHeight: topColumn.height + bottomColumn.height + 60 + implicitHeight: topColumn.height + bottomColumn.height + 33 * theme.fontScale ColumnLayout { id: topColumn @@ -39,30 +39,22 @@ Rectangle { anchors.right: parent.right anchors.top: parent.top anchors.margins: 20 - spacing: 30 + spacing: 15 * theme.fontScale RowLayout { Layout.alignment: Qt.AlignTop spacing: 10 - Rectangle { - id: rec - color: "transparent" - Layout.preferredWidth: 48 - Layout.preferredHeight: 48 + Item { + Layout.preferredWidth: 27 * theme.fontScale + Layout.preferredHeight: 27 * theme.fontScale Layout.alignment: Qt.AlignLeft + Image { id: myimage anchors.centerIn: parent - sourceSize.width: rec.width - sourceSize.height: rec.height + sourceSize.width: parent.width + sourceSize.height: parent.height mipmap: true - visible: false fillMode: Image.PreserveAspectFit - - } - - ColorOverlay { - anchors.fill: myimage - source: myimage } } @@ -73,9 +65,19 @@ Rectangle { } } - MySettingsLabel { + Label { id: providerDescLabel - onLinkActivated: function(link) { Qt.openUrlExternally(link) } + Layout.fillWidth: true + wrapMode: Text.Wrap + color: theme.settingsTitleTextColor + font.pixelSize: theme.fontSizeLarge + onLinkActivated: function(link) { Qt.openUrlExternally(link); } + + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.NoButton // pass clicks to parent + cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor + } } } @@ -98,6 +100,7 @@ Rectangle { MyTextField { id: apiKeyField Layout.fillWidth: true + font.pixelSize: theme.fontSizeLarge wrapMode: Text.WrapAnywhere function showError() { messageToast.show(qsTr("ERROR: $API_KEY is empty.")); @@ -128,6 +131,7 @@ Rectangle { MyTextField { id: baseUrlField Layout.fillWidth: true + font.pixelSize: theme.fontSizeLarge wrapMode: Text.WrapAnywhere function showError() { messageToast.show(qsTr("ERROR: $BASE_URL is empty.")); @@ -152,6 +156,7 @@ Rectangle { MyTextField { id: modelNameField Layout.fillWidth: true + font.pixelSize: theme.fontSizeLarge wrapMode: Text.WrapAnywhere function showError() { messageToast.show(qsTr("ERROR: $MODEL_NAME is empty."))