github/gpt4all
1
0
Fork 0
mirror of https://github.com/nomic-ai/gpt4all.git synced 2025-07-04 11:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

New lightmode and darkmode themes with UI revamp.

Browse Source 
Signed-off-by: Adam Treat <treat.adam@gmail.com>
This commit is contained in:
Adam Treat 2024-01-22 14:41:47 -05:00 committed by AT
parent 0a45dd384e
commit 697a5f5d2a
31 changed files with 780 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gpt4all-chat/CMakeLists.txt
View File

@ -111,10 +111,15 @@ qt_add_qml_module(chat
qml/LocalDocsSettings.qml qml/LocalDocsSettings.qml
qml/MySettingsTab.qml qml/MySettingsTab.qml
qml/MySettingsStack.qml qml/MySettingsStack.qml
qml/MySettingsDestructiveButton.qml
qml/MySettingsButton.qml
qml/MySettingsLabel.qml
qml/MySlug.qml
qml/MyButton.qml qml/MyButton.qml
qml/MyComboBox.qml qml/MyComboBox.qml
qml/MyDialog.qml qml/MyDialog.qml
qml/MyDirectoryField.qml qml/MyDirectoryField.qml
qml/MyTextArea.qml
qml/MyTextField.qml qml/MyTextField.qml
qml/MyCheckBox.qml qml/MyCheckBox.qml
qml/MyBusyIndicator.qml qml/MyBusyIndicator.qml

285
gpt4all-chat/main.qml
View File

@ -14,10 +14,10 @@ import mysettings
Window { Window {
id: window id: window
width: 1280 width: 1920
height: 720 height: 1080
minimumWidth: 720 minimumWidth: 1280
minimumHeight: 480 minimumHeight: 720
visible: true visible: true
title: qsTr("GPT4All v") + Qt.application.version title: qsTr("GPT4All v") + Qt.application.version
@ -47,7 +47,7 @@ Window {
} }
} }
color: theme.backgroundDarkest color: theme.black
// Startup code // Startup code
Component.onCompleted: { Component.onCompleted: {
@ -197,13 +197,93 @@ Window {
+ "<li>Check out our <a href=\"https://discord.gg/4M2QFmTt2k\">discord channel</a> for help") + "<li>Check out our <a href=\"https://discord.gg/4M2QFmTt2k\">discord channel</a> for help")
} }
Rectangle {
id: yellowRibbon
anchors.left: parent.left
anchors.right: parent.right
anchors.top: header.bottom
height: 3
color: theme.yellowAccent
}
Rectangle {
id: titleBar
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.topMargin: 5
z: 200
height: 25
color: "transparent"
RowLayout {
anchors.left: parent.left
anchors.leftMargin: 30
Text {
textFormat: Text.StyledText
text: "<a href=\"https://gpt4all.io\">gpt4all.io</a> |"
horizontalAlignment: Text.AlignLeft
font.pixelSize: theme.fontSizeFixedSmall
color: theme.gray300
linkColor: theme.gray300
onLinkActivated: { Qt.openUrlExternally("https://gpt4all.io") }
}
Text {
textFormat: Text.StyledText
text: "<a href=\"https://github.com/nomic-ai/gpt4all\">github</a>"
horizontalAlignment: Text.AlignLeft
font.pixelSize: theme.fontSizeFixedSmall
color: theme.gray300
linkColor: theme.gray300
onLinkActivated: { Qt.openUrlExternally("https://github.com/nomic-ai/gpt4all") }
}
}
RowLayout {
anchors.right: parent.right
anchors.rightMargin: 30
Text {
textFormat: Text.StyledText
text: "<a href=\"https://nomic.ai\">nomic.ai</a> |"
horizontalAlignment: Text.AlignRight
font.pixelSize: theme.fontSizeFixedSmall
color: theme.gray300
linkColor: theme.gray300
onLinkActivated: { Qt.openUrlExternally("https://nomic.ai") }
}
Text {
textFormat: Text.StyledText
text: "<a href=\"https://twitter.com/nomic_ai\">twitter</a> |"
horizontalAlignment: Text.AlignRight
font.pixelSize: theme.fontSizeFixedSmall
color: theme.gray300
linkColor: theme.gray300
onLinkActivated: { Qt.openUrlExternally("https://twitter.com/nomic_ai") }
}
Text {
textFormat: Text.StyledText
text: "<a href=\"https://discord.gg/4M2QFmTt2k\">discord</a>"
horizontalAlignment: Text.AlignRight
font.pixelSize: theme.fontSizeFixedSmall
color: theme.gray300
linkColor: theme.gray300
onLinkActivated: { Qt.openUrlExternally("https://discord.gg/4M2QFmTt2k") }
}
}
}
Rectangle { Rectangle {
id: header id: header
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
height: 100 height: 100
color: theme.backgroundDarkest color: theme.mainHeader
Item { Item {
anchors.centerIn: parent anchors.centerIn: parent
height: childrenRect.height height: childrenRect.height
@ -216,7 +296,7 @@ Window {
font.pixelSize: theme.fontSizeLarger font.pixelSize: theme.fontSizeLarger
text: "" text: ""
background: Rectangle { background: Rectangle {
color: theme.backgroundDarkest color: theme.mainHeader
} }
horizontalAlignment: TextInput.AlignRight horizontalAlignment: TextInput.AlignRight
} }
@ -251,7 +331,7 @@ Window {
} }
} }
background: Rectangle { background: Rectangle {
color: theme.backgroundDark color: theme.mainComboBackground
radius: 10 radius: 10
} }
contentItem: Text { contentItem: Text {
@ -261,8 +341,8 @@ Window {
text: currentChat.modelLoadingError !== "" text: currentChat.modelLoadingError !== ""
? qsTr("Model loading error...") ? qsTr("Model loading error...")
: comboBox.currentModelName : comboBox.currentModelName
font: comboBox.font font.pixelSize: theme.fontSizeLarger
color: theme.textColor color: theme.white
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -277,7 +357,9 @@ Window {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
background: Rectangle { background: Rectangle {
color: highlighted ? theme.backgroundLight : theme.backgroundDark color: (index % 2 === 0 ? theme.darkContrast : theme.lightContrast)
border.width: highlighted
border.color: theme.yellowAccent
} }
highlighted: comboBox.highlightedIndex === index highlighted: comboBox.highlightedIndex === index
} }
@ -314,7 +396,7 @@ Window {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: qsTr("Loading model...") text: qsTr("Loading model...")
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
color: theme.textAccent color: theme.oppositeTextColor
} }
} }
} }
@ -335,7 +417,7 @@ Window {
id: drawerButton id: drawerButton
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 30 anchors.topMargin: 42.5
anchors.leftMargin: 30 anchors.leftMargin: 30
width: 40 width: 40
height: 40 height: 40
@ -353,7 +435,7 @@ Window {
Rectangle { Rectangle {
id: bar1 id: bar1
color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
width: parent.width width: parent.width
height: 6 height: 6
radius: 2 radius: 2
@ -363,7 +445,7 @@ Window {
Rectangle { Rectangle {
id: bar2 id: bar2
anchors.centerIn: parent anchors.centerIn: parent
color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
width: parent.width width: parent.width
height: 6 height: 6
radius: 2 radius: 2
@ -373,7 +455,7 @@ Window {
Rectangle { Rectangle {
id: bar3 id: bar3
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
color: drawerButton.hovered ? theme.textColor : theme.backgroundLightest color: drawerButton.hovered ? theme.iconBackgroundHovered : theme.iconBackgroundLight
width: parent.width width: parent.width
height: 6 height: 6
radius: 2 radius: 2
@ -399,9 +481,10 @@ Window {
MyToolButton { MyToolButton {
id: networkButton id: networkButton
backgroundColor: theme.iconBackgroundLight
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 30 anchors.topMargin: 42.5
anchors.rightMargin: 30 anchors.rightMargin: 30
width: 40 width: 40
height: 40 height: 40
@ -439,9 +522,10 @@ Window {
MyToolButton { MyToolButton {
id: collectionsButton id: collectionsButton
backgroundColor: theme.iconBackgroundLight
anchors.right: networkButton.left anchors.right: networkButton.left
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 30 anchors.topMargin: 42.5
anchors.rightMargin: 10 anchors.rightMargin: 10
width: 40 width: 40
height: 40 height: 40
@ -459,9 +543,10 @@ Window {
MyToolButton { MyToolButton {
id: settingsButton id: settingsButton
backgroundColor: theme.iconBackgroundLight
anchors.right: collectionsButton.left anchors.right: collectionsButton.left
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 30 anchors.topMargin: 42.5
anchors.rightMargin: 10 anchors.rightMargin: 10
width: 40 width: 40
height: 40 height: 40
@ -527,9 +612,10 @@ Window {
MyToolButton { MyToolButton {
id: copyButton id: copyButton
backgroundColor: theme.iconBackgroundLight
anchors.right: settingsButton.left anchors.right: settingsButton.left
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 30 anchors.topMargin: 42.5
anchors.rightMargin: 10 anchors.rightMargin: 10
width: 40 width: 40
height: 40 height: 40
@ -592,9 +678,10 @@ Window {
MyToolButton { MyToolButton {
id: resetContextButton id: resetContextButton
backgroundColor: theme.iconBackgroundLight
anchors.right: copyButton.left anchors.right: copyButton.left
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 30 anchors.topMargin: 42.5
anchors.rightMargin: 10 anchors.rightMargin: 10
width: 40 width: 40
height: 40 height: 40
@ -616,7 +703,6 @@ Window {
id: checkForUpdatesError id: checkForUpdatesError
anchors.centerIn: parent anchors.centerIn: parent
modal: false modal: false
opacity: 0.9
padding: 20 padding: 20
Text { Text {
horizontalAlignment: Text.AlignJustify horizontalAlignment: Text.AlignJustify
@ -627,7 +713,7 @@ Window {
above where this application resides on your filesystem.<br><br> above where this application resides on your filesystem.<br><br>
If you can't start it manually, then I'm afraid you'll have to<br> If you can't start it manually, then I'm afraid you'll have to<br>
reinstall.") reinstall.")
color: theme.textColor color: theme.textErrorColor
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
Accessible.role: Accessible.Dialog Accessible.role: Accessible.Dialog
Accessible.name: text Accessible.name: text
@ -635,7 +721,7 @@ Window {
} }
background: Rectangle { background: Rectangle {
anchors.fill: parent anchors.fill: parent
color: theme.backgroundDarkest color: theme.containerBackground
border.width: 1 border.width: 1
border.color: theme.dialogBorder border.color: theme.dialogBorder
radius: 10 radius: 10
@ -656,7 +742,7 @@ Window {
ChatDrawer { ChatDrawer {
id: drawer id: drawer
y: header.height y: header.height + yellowRibbon.height
width: Math.min(600, 0.3 * window.width) width: Math.min(600, 0.3 * window.width)
height: window.height - y height: window.height - y
onDownloadClicked: { onDownloadClicked: {
@ -678,11 +764,11 @@ Window {
Rectangle { Rectangle {
id: conversation id: conversation
color: theme.backgroundLight color: theme.containerBackground
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.top: header.bottom anchors.top: yellowRibbon.bottom
ScrollView { ScrollView {
id: scrollView id: scrollView
@ -695,33 +781,97 @@ Window {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: currentChat.isServer ? theme.backgroundDark : theme.backgroundLight color: currentChat.isServer ? theme.black : theme.containerBackground
Rectangle {
id: homePage
color: "transparent"//theme.green200
anchors.fill: parent
visible: (ModelList.installedModels.count === 0 || chatModel.count === 0) && !currentChat.isServer
ColumnLayout {
anchors.centerIn: parent
spacing: 0
Text { Text {
id: warningLabel Layout.alignment: Qt.AlignHCenter
text: qsTr("You must install a model to continue. Models are available via the download dialog or you can install them manually by downloading from <a href=\"https://gpt4all.io\">the GPT4All website</a> (look for the Models Explorer) and placing them in the model folder. The model folder can be found in the settings dialog under the application tab.") text: qsTr("GPT4All")
color: theme.textColor color: theme.titleTextColor
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLargest + 15
width: 600 font.bold: true
linkColor: theme.linkColor horizontalAlignment: Qt.AlignHCenter
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.centerIn: parent }
visible: ModelList.installedModels.count === 0
onLinkActivated: function(link) { Text {
Qt.openUrlExternally(link) Layout.alignment: Qt.AlignHCenter
textFormat: Text.StyledText
text: qsTr(
"<ul>
<li>Run privacy-aware local chatbots.
<li>No internet required to use.
<li>CPU and GPU acceleration.
<li>Chat with your local data and documents.
<li>Built by Nomic AI and forever open-source.
</ul>
")
color: theme.textColor
font.pixelSize: theme.fontSizeSmall
wrapMode: Text.WordWrap
}
RowLayout {
spacing: 10
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 30
MySlug {
text: "MISTRAL"
color: theme.red600
}
MySlug {
text: "FALCON"
color: theme.green600
}
MySlug {
text: "LLAMA"
color: theme.purple500
}
MySlug {
text: "LLAMA2"
color: theme.red400
}
MySlug {
text: "MPT"
color: theme.green700
}
MySlug {
text: "REPLIT"
color: theme.yellow700
}
MySlug {
text: "STARCODER"
color: theme.purple400
}
MySlug {
text: "SBERT"
color: theme.yellow600
}
MySlug {
text: "GPT-J"
color: theme.gray600
} }
} }
MyButton { MyButton {
id: downloadButton id: downloadButton
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 40
text: qsTr("Download models") text: qsTr("Download models")
visible: ModelList.installedModels.count === 0 fontPixelSize: theme.fontSizeLargest + 10
anchors.top: warningLabel.bottom padding: 18
anchors.topMargin: 20
anchors.horizontalCenter: warningLabel.horizontalCenter
padding: 15
leftPadding: 50 leftPadding: 50
Image { Image {
id: image
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 15 anchors.leftMargin: 15
@ -730,23 +880,30 @@ Window {
mipmap: true mipmap: true
source: "qrc:/gpt4all/icons/download.svg" source: "qrc:/gpt4all/icons/download.svg"
} }
background: Rectangle { ColorOverlay {
border.color: downloadButton.down ? theme.backgroundLightest : theme.buttonBorder anchors.fill: image
border.width: 2 source: image
radius: 10 color: theme.yellowAccent
color: downloadButton.hovered ? theme.backgroundLighter : theme.backgroundLight
} }
onClicked: { onClicked: {
downloadNewModels.open(); downloadNewModels.open();
} }
} }
}
}
ListView { ListView {
id: listView id: listView
visible: ModelList.installedModels.count !== 0 visible: ModelList.installedModels.count !== 0 && chatModel.count !== 0
anchors.fill: parent anchors.fill: parent
model: chatModel model: chatModel
ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn }
ScrollBar.vertical: ScrollBar {
parent: listView.parent
anchors.top: listView.top
anchors.left: listView.right
anchors.bottom: listView.bottom
}
Accessible.role: Accessible.List Accessible.role: Accessible.List
Accessible.name: qsTr("Conversation with the model") Accessible.name: qsTr("Conversation with the model")
@ -767,8 +924,8 @@ Window {
background: Rectangle { background: Rectangle {
opacity: 1.0 opacity: 1.0
color: name === qsTr("Response: ") color: name === qsTr("Response: ")
? (currentChat.isServer ? theme.backgroundDarkest : theme.backgroundLighter) ? (currentChat.isServer ? theme.black : theme.lightContrast)
: (currentChat.isServer ? theme.backgroundDark : theme.backgroundLight) : (currentChat.isServer ? theme.white : theme.darkContrast)
} }
TapHandler { TapHandler {
id: tapHandler id: tapHandler
@ -793,7 +950,7 @@ Window {
Component.onCompleted: { Component.onCompleted: {
responseText.setLinkColor(theme.linkColor); responseText.setLinkColor(theme.linkColor);
responseText.setHeaderColor(name === qsTr("Response: ") ? theme.backgroundLight : theme.backgroundLighter); responseText.setHeaderColor(name === qsTr("Response: ") ? theme.darkContrast : theme.lightContrast);
responseText.textDocument = textDocument responseText.textDocument = textDocument
} }
@ -824,7 +981,7 @@ Window {
} }
Label { Label {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: theme.textAccent color: theme.mutedTextColor
text: { text: {
switch (currentChat.responseState) { switch (currentChat.responseState) {
case Chat.ResponseStopped: return qsTr("response stopped ..."); case Chat.ResponseStopped: return qsTr("response stopped ...");
@ -981,6 +1138,7 @@ Window {
MyButton { MyButton {
id: myButton id: myButton
visible: chatModel.count && !currentChat.isServer visible: chatModel.count && !currentChat.isServer
textColor: theme.textColor
Image { Image {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
@ -1010,10 +1168,10 @@ Window {
} }
} }
background: Rectangle { background: Rectangle {
border.color: myButton.down ? theme.backgroundLightest : theme.buttonBorder border.color: theme.conversationButtonBorder
border.width: 2 border.width: 2
radius: 10 radius: 10
color: myButton.hovered ? theme.backgroundLighter : theme.backgroundLight color: myButton.hovered ? theme.conversationButtonBackgroundHovered : theme.conversationButtonBackground
} }
anchors.bottom: textInputView.top anchors.bottom: textInputView.top
anchors.horizontalCenter: textInputView.horizontalCenter anchors.horizontalCenter: textInputView.horizontalCenter
@ -1037,12 +1195,13 @@ Window {
RectangularGlow { RectangularGlow {
id: effect id: effect
visible: !currentChat.isServer
anchors.fill: textInputView anchors.fill: textInputView
glowRadius: 50 glowRadius: 50
spread: 0 spread: 0
color: theme.backgroundDark color: theme.sendGlow
cornerRadius: 10 cornerRadius: 10
opacity: 0.2 opacity: 0.1
} }
ScrollView { ScrollView {
@ -1053,7 +1212,7 @@ Window {
anchors.margins: 30 anchors.margins: 30
height: Math.min(contentHeight, 200) height: Math.min(contentHeight, 200)
visible: !currentChat.isServer visible: !currentChat.isServer
TextArea { MyTextArea {
id: textInput id: textInput
color: theme.textColor color: theme.textColor
topPadding: 30 topPadding: 30
@ -1061,14 +1220,8 @@ Window {
leftPadding: 20 leftPadding: 20
rightPadding: 40 rightPadding: 40
enabled: currentChat.isModelLoaded && !currentChat.isServer enabled: currentChat.isModelLoaded && !currentChat.isServer
wrapMode: Text.WordWrap
font.pixelSize: theme.fontSizeLarger font.pixelSize: theme.fontSizeLarger
placeholderText: qsTr("Send a message...") placeholderText: qsTr("Send a message...")
placeholderTextColor: theme.mutedTextColor
background: Rectangle {
color: theme.backgroundAccent
radius: 10
}
Accessible.role: Accessible.EditableText Accessible.role: Accessible.EditableText
Accessible.name: placeholderText Accessible.name: placeholderText
Accessible.description: qsTr("Send messages/prompts to the model") Accessible.description: qsTr("Send messages/prompts to the model")
@ -1101,6 +1254,8 @@ Window {
} }
MyToolButton { MyToolButton {
backgroundColor: theme.sendButtonBackground
backgroundColorHovered: theme.sendButtonBackgroundHovered
anchors.right: textInputView.right anchors.right: textInputView.right
anchors.verticalCenter: textInputView.verticalCenter anchors.verticalCenter: textInputView.verticalCenter
anchors.rightMargin: 15 anchors.rightMargin: 15

18
gpt4all-chat/qml/AboutDialog.qml
View File

@ -11,7 +11,6 @@ MyDialog {
id: abpoutDialog id: abpoutDialog
anchors.centerIn: parent anchors.centerIn: parent
modal: false modal: false
opacity: 0.9
padding: 20 padding: 20
width: 1024 width: 1024
height: column.height + 40 height: column.height + 40
@ -39,8 +38,9 @@ MyDialog {
anchors.leftMargin: 30 anchors.leftMargin: 30
anchors.verticalCenter: img.verticalCenter anchors.verticalCenter: img.verticalCenter
text: qsTr("About GPT4All") text: qsTr("About GPT4All")
font.pixelSize: theme.fontSizeLarger
color: theme.textColor color: theme.textColor
font.pixelSize: theme.fontSizeLarge
font.bold: true
} }
} }
@ -51,31 +51,23 @@ MyDialog {
ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
TextArea { MyTextArea {
id: welcome id: welcome
wrapMode: Text.Wrap
width: 1024 - 40 width: 1024 - 40
padding: 20
textFormat: TextEdit.MarkdownText textFormat: TextEdit.MarkdownText
text: qsTr("### Release notes\n") text: qsTr("### Release notes\n")
+ Download.releaseInfo.notes + Download.releaseInfo.notes
+ qsTr("### Contributors\n") + qsTr("### Contributors\n")
+ Download.releaseInfo.contributors + Download.releaseInfo.contributors
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
focus: false focus: false
readOnly: true readOnly: true
Accessible.role: Accessible.Paragraph Accessible.role: Accessible.Paragraph
Accessible.name: qsTr("Release notes") Accessible.name: qsTr("Release notes")
Accessible.description: qsTr("Release notes for this version") Accessible.description: qsTr("Release notes for this version")
background: Rectangle {
color: theme.backgroundLight
radius: 10
}
} }
} }
Label { MySettingsLabel {
id: discordLink id: discordLink
width: parent.width width: parent.width
textFormat: Text.StyledText textFormat: Text.StyledText
@ -90,7 +82,7 @@ MyDialog {
Accessible.name: qsTr("Discord link") Accessible.name: qsTr("Discord link")
} }
Label { MySettingsLabel {
id: nomicProps id: nomicProps
width: parent.width width: parent.width
textFormat: Text.StyledText textFormat: Text.StyledText

66
gpt4all-chat/qml/ApplicationSettings.qml
View File

@ -18,11 +18,9 @@ MySettingsTab {
columns: 3 columns: 3
rowSpacing: 10 rowSpacing: 10
columnSpacing: 10 columnSpacing: 10
Label { MySettingsLabel {
id: themeLabel id: themeLabel
text: qsTr("Theme:") text: qsTr("Theme")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 1 Layout.row: 1
Layout.column: 0 Layout.column: 0
} }
@ -53,11 +51,9 @@ MySettingsTab {
MySettings.chatTheme = themeBox.currentText MySettings.chatTheme = themeBox.currentText
} }
} }
Label { MySettingsLabel {
id: fontLabel id: fontLabel
text: qsTr("Font Size:") text: qsTr("Font Size")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 2 Layout.row: 2
Layout.column: 0 Layout.column: 0
} }
@ -88,11 +84,9 @@ MySettingsTab {
MySettings.fontSize = fontBox.currentText MySettings.fontSize = fontBox.currentText
} }
} }
Label { MySettingsLabel {
id: deviceLabel id: deviceLabel
text: qsTr("Device:") text: qsTr("Device")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 3 Layout.row: 3
Layout.column: 0 Layout.column: 0
} }
@ -126,11 +120,9 @@ MySettingsTab {
MySettings.device = deviceBox.currentText MySettings.device = deviceBox.currentText
} }
} }
Label { MySettingsLabel {
id: defaultModelLabel id: defaultModelLabel
text: qsTr("Default model:") text: qsTr("Default model")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 4 Layout.row: 4
Layout.column: 0 Layout.column: 0
} }
@ -161,11 +153,9 @@ MySettingsTab {
MySettings.userDefaultModel = comboBox.currentText MySettings.userDefaultModel = comboBox.currentText
} }
} }
Label { MySettingsLabel {
id: modelPathLabel id: modelPathLabel
text: qsTr("Download path:") text: qsTr("Download path")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 5 Layout.row: 5
Layout.column: 0 Layout.column: 0
} }
@ -190,7 +180,7 @@ MySettingsTab {
} }
} }
} }
MyButton { MySettingsButton {
Layout.row: 5 Layout.row: 5
Layout.column: 2 Layout.column: 2
text: qsTr("Browse") text: qsTr("Browse")
@ -201,11 +191,9 @@ MySettingsTab {
}) })
} }
} }
Label { MySettingsLabel {
id: nThreadsLabel id: nThreadsLabel
text: qsTr("CPU Threads:") text: qsTr("CPU Threads")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 6 Layout.row: 6
Layout.column: 0 Layout.column: 0
} }
@ -233,11 +221,9 @@ MySettingsTab {
Accessible.name: nThreadsLabel.text Accessible.name: nThreadsLabel.text
Accessible.description: ToolTip.text Accessible.description: ToolTip.text
} }
Label { MySettingsLabel {
id: saveChatsContextLabel id: saveChatsContextLabel
text: qsTr("Save chats context to disk:") text: qsTr("Save chats context to disk")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 7 Layout.row: 7
Layout.column: 0 Layout.column: 0
} }
@ -252,11 +238,9 @@ MySettingsTab {
ToolTip.text: qsTr("WARNING: Saving chats to disk can be ~2GB per chat") ToolTip.text: qsTr("WARNING: Saving chats to disk can be ~2GB per chat")
ToolTip.visible: hovered ToolTip.visible: hovered
} }
Label { MySettingsLabel {
id: serverChatLabel id: serverChatLabel
text: qsTr("Enable API server:") text: qsTr("Enable API server")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 8 Layout.row: 8
Layout.column: 0 Layout.column: 0
} }
@ -276,8 +260,8 @@ MySettingsTab {
Layout.column: 0 Layout.column: 0
Layout.columnSpan: 3 Layout.columnSpan: 3
Layout.fillWidth: true Layout.fillWidth: true
height: 1 height: 3
color: theme.tabBorder color: theme.yellowAccent
} }
} }
advancedSettings: GridLayout { advancedSettings: GridLayout {
@ -289,14 +273,12 @@ MySettingsTab {
Layout.column: 0 Layout.column: 0
Layout.fillWidth: true Layout.fillWidth: true
Layout.columnSpan: 3 Layout.columnSpan: 3
height: 1 height: 3
color: theme.tabBorder color: theme.yellowAccent
} }
Label { MySettingsLabel {
id: gpuOverrideLabel id: gpuOverrideLabel
text: qsTr("Force Metal (macOS+arm):") text: qsTr("Force Metal (macOS+arm)")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 1 Layout.row: 1
Layout.column: 0 Layout.column: 0
} }
@ -316,7 +298,7 @@ MySettingsTab {
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.minimumHeight: warningLabel.height Layout.minimumHeight: warningLabel.height
Label { MySettingsLabel {
id: warningLabel id: warningLabel
width: parent.width width: parent.width
color: theme.textErrorColor color: theme.textErrorColor

21
gpt4all-chat/qml/ChatDrawer.qml
View File

@ -12,7 +12,6 @@ import mysettings
Drawer { Drawer {
id: chatDrawer id: chatDrawer
modal: false modal: false
opacity: 0.9
Theme { Theme {
id: theme id: theme
@ -23,7 +22,7 @@ Drawer {
background: Rectangle { background: Rectangle {
height: parent.height height: parent.height
color: theme.backgroundDarkest color: theme.containerBackground
} }
Item { Item {
@ -43,12 +42,6 @@ Drawer {
bottomPadding: 20 bottomPadding: 20
text: qsTr("\uFF0B New chat") text: qsTr("\uFF0B New chat")
Accessible.description: qsTr("Create a new chat") Accessible.description: qsTr("Create a new chat")
background: Rectangle {
border.color: newChat.down ? theme.backgroundLightest : theme.buttonBorder
border.width: 2
radius: 10
color: newChat.hovered ? theme.backgroundDark : theme.backgroundDarkest
}
onClicked: { onClicked: {
ChatListModel.addChat(); ChatListModel.addChat();
Network.sendNewChat(ChatListModel.count) Network.sendNewChat(ChatListModel.count)
@ -71,19 +64,23 @@ Drawer {
anchors.fill: parent anchors.fill: parent
anchors.rightMargin: 10 anchors.rightMargin: 10
model: ChatListModel model: ChatListModel
ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn } ScrollBar.vertical: ScrollBar {
parent: conversationList.parent
anchors.top: conversationList.top
anchors.left: conversationList.right
anchors.bottom: conversationList.bottom
}
delegate: Rectangle { delegate: Rectangle {
id: chatRectangle id: chatRectangle
width: conversationList.width width: conversationList.width
height: chatName.height height: chatName.height
opacity: 0.9
property bool isCurrent: ChatListModel.currentChat === ChatListModel.get(index) property bool isCurrent: ChatListModel.currentChat === ChatListModel.get(index)
property bool isServer: ChatListModel.get(index) && ChatListModel.get(index).isServer property bool isServer: ChatListModel.get(index) && ChatListModel.get(index).isServer
property bool trashQuestionDisplayed: false property bool trashQuestionDisplayed: false
visible: !isServer || MySettings.serverChat visible: !isServer || MySettings.serverChat
z: isCurrent ? 199 : 1 z: isCurrent ? 199 : 1
color: isServer ? theme.backgroundDarkest : (index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter) color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast
border.width: isCurrent border.width: isCurrent
border.color: chatName.readOnly ? theme.assistantColor : theme.userColor border.color: chatName.readOnly ? theme.assistantColor : theme.userColor
TextField { TextField {
@ -106,7 +103,7 @@ Drawer {
font: chatName.font font: chatName.font
text: name text: name
elide: Text.ElideRight elide: Text.ElideRight
elideWidth: chatName.width - 25 elideWidth: chatName.width - 40
} }
background: Rectangle { background: Rectangle {
color: "transparent" color: "transparent"

24
gpt4all-chat/qml/CollectionsDialog.qml
View File

@ -22,9 +22,10 @@ MyDialog {
id: listLabel id: listLabel
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
text: qsTr("Local Documents:") text: qsTr("Local Documents")
color: theme.titleTextColor
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
color: theme.textColor font.bold: true
} }
ScrollView { ScrollView {
@ -37,21 +38,28 @@ MyDialog {
anchors.right: parent.right anchors.right: parent.right
clip: true clip: true
contentHeight: 300 contentHeight: 300
ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.vertical.policy: ScrollBar.AlwaysOff
background: Rectangle { background: Rectangle {
color: theme.backgroundLighter color: theme.controlBackground
} }
ListView { ListView {
id: listView id: listView
model: LocalDocs.localDocsModel model: LocalDocs.localDocsModel
boundsBehavior: Flickable.StopAtBounds boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar {
parent: listView.parent
anchors.top: listView.top
anchors.left: listView.right
anchors.bottom: listView.bottom
}
delegate: Rectangle { delegate: Rectangle {
id: item id: item
width: listView.width width: listView.width
height: collectionId.height + 40 height: collectionId.height + 40
color: index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast
MyCheckBox { MyCheckBox {
id: checkBox id: checkBox
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -90,7 +98,7 @@ MyDialog {
value: (model.totalBytesToIndex - model.currentBytesToIndex) / model.totalBytesToIndex value: (model.totalBytesToIndex - model.currentBytesToIndex) / model.totalBytesToIndex
background: Rectangle { background: Rectangle {
implicitHeight: 45 implicitHeight: 45
color: theme.backgroundDarkest color: theme.progressBackground
radius: 3 radius: 3
} }
contentItem: Item { contentItem: Item {
@ -100,7 +108,7 @@ MyDialog {
width: itemProgressBar.visualPosition * parent.width width: itemProgressBar.visualPosition * parent.width
height: parent.height height: parent.height
radius: 2 radius: 2
color: theme.assistantColor color: theme.progressForeground
} }
} }
Accessible.role: Accessible.ProgressBar Accessible.role: Accessible.ProgressBar
@ -123,7 +131,7 @@ MyDialog {
} }
} }
MyButton { MySettingsButton {
id: collectionSettings id: collectionSettings
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter

42
gpt4all-chat/qml/LocalDocsSettings.qml
View File

@ -26,7 +26,7 @@ MySettingsTab {
property alias collection: collection.text property alias collection: collection.text
property alias folder_path: folderEdit.text property alias folder_path: folderEdit.text
Label { MySettingsLabel {
id: downloadLabel id: downloadLabel
Layout.fillWidth: true Layout.fillWidth: true
Layout.maximumWidth: parent.width Layout.maximumWidth: parent.width
@ -34,11 +34,9 @@ MySettingsTab {
visible: !hasEmbeddingModel visible: !hasEmbeddingModel
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignLeft
text: qsTr("This feature requires the download of a text embedding model in order to index documents for later search. Please download the <b>SBert</a> text embedding model from the download dialog to proceed.") text: qsTr("This feature requires the download of a text embedding model in order to index documents for later search. Please download the <b>SBert</a> text embedding model from the download dialog to proceed.")
font.pixelSize: theme.fontSizeLarger
color: theme.textColor
} }
MyButton { MySettingsButton {
visible: !hasEmbeddingModel visible: !hasEmbeddingModel
Layout.topMargin: 20 Layout.topMargin: 20
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignLeft
@ -97,7 +95,7 @@ MySettingsTab {
} }
} }
MyButton { MySettingsButton {
id: browseButton id: browseButton
text: qsTr("Browse") text: qsTr("Browse")
onClicked: { onClicked: {
@ -107,7 +105,7 @@ MySettingsTab {
} }
} }
MyButton { MySettingsButton {
id: addButton id: addButton
text: qsTr("Add") text: qsTr("Add")
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
@ -143,7 +141,7 @@ MySettingsTab {
id: item id: item
Layout.fillWidth: true Layout.fillWidth: true
height: buttons.height + 20 height: buttons.height + 20
color: index % 2 === 0 ? theme.backgroundDark : theme.backgroundDarker color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast
property bool removing: false property bool removing: false
Text { Text {
@ -177,7 +175,7 @@ MySettingsTab {
anchors.margins: 20 anchors.margins: 20
width: removeButton.width width: removeButton.width
height:removeButton.height height:removeButton.height
MyButton { MySettingsButton {
id: removeButton id: removeButton
anchors.centerIn: parent anchors.centerIn: parent
text: qsTr("Remove") text: qsTr("Remove")
@ -194,11 +192,9 @@ MySettingsTab {
RowLayout { RowLayout {
visible: hasEmbeddingModel visible: hasEmbeddingModel
Label { MySettingsLabel {
id: showReferencesLabel id: showReferencesLabel
text: qsTr("Show references:") text: qsTr("Show references")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
} }
MyCheckBox { MyCheckBox {
id: showReferencesBox id: showReferencesBox
@ -214,8 +210,8 @@ MySettingsTab {
Rectangle { Rectangle {
visible: hasEmbeddingModel visible: hasEmbeddingModel
Layout.fillWidth: true Layout.fillWidth: true
height: 1 height: 3
color: theme.tabBorder color: theme.yellowAccent
} }
} }
advancedSettings: GridLayout { advancedSettings: GridLayout {
@ -230,17 +226,15 @@ MySettingsTab {
Layout.column: 0 Layout.column: 0
Layout.fillWidth: true Layout.fillWidth: true
Layout.columnSpan: 3 Layout.columnSpan: 3
height: 1 height: 3
color: theme.tabBorder color: theme.yellowAccent
} }
Label { MySettingsLabel {
id: chunkLabel id: chunkLabel
Layout.row: 1 Layout.row: 1
Layout.column: 0 Layout.column: 0
color: theme.textColor text: qsTr("Document snippet size (characters)")
font.pixelSize: theme.fontSizeLarge
text: qsTr("Document snippet size (characters):")
} }
MyTextField { MyTextField {
@ -264,13 +258,11 @@ MySettingsTab {
} }
} }
Label { MySettingsLabel {
id: contextItemsPerPrompt id: contextItemsPerPrompt
Layout.row: 2 Layout.row: 2
Layout.column: 0 Layout.column: 0
color: theme.textColor text: qsTr("Max document snippets per prompt")
font.pixelSize: theme.fontSizeLarge
text: qsTr("Max document snippets per prompt:")
} }
MyTextField { MyTextField {
@ -300,7 +292,7 @@ MySettingsTab {
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.minimumHeight: warningLabel.height Layout.minimumHeight: warningLabel.height
Label { MySettingsLabel {
id: warningLabel id: warningLabel
width: parent.width width: parent.width
color: theme.textErrorColor color: theme.textErrorColor

68
gpt4all-chat/qml/ModelDownloaderDialog.qml
View File

@ -41,11 +41,12 @@ MyDialog {
Label { Label {
id: listLabel id: listLabel
text: qsTr("Available Models:") text: qsTr("Available Models")
font.pixelSize: theme.fontSizeLarge
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignLeft
Layout.fillWidth: true Layout.fillWidth: true
color: theme.textColor color: theme.titleTextColor
font.pixelSize: theme.fontSizeLarge
font.bold: true
} }
Label { Label {
@ -84,7 +85,7 @@ MyDialog {
id: delegateItem id: delegateItem
width: modelListView.width width: modelListView.width
height: childrenRect.height height: childrenRect.height
color: index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter color: index % 2 === 0 ? theme.darkContrast : theme.lightContrast
GridLayout { GridLayout {
columns: 2 columns: 2
@ -99,7 +100,7 @@ MyDialog {
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 20 Layout.leftMargin: 20
Layout.columnSpan: 2 Layout.columnSpan: 2
color: theme.assistantColor color: theme.titleTextColor
Accessible.role: Accessible.Paragraph Accessible.role: Accessible.Paragraph
Accessible.name: qsTr("Model file") Accessible.name: qsTr("Model file")
Accessible.description: qsTr("Model file to be downloaded") Accessible.description: qsTr("Model file to be downloaded")
@ -108,7 +109,8 @@ MyDialog {
Rectangle { Rectangle {
id: actionBox id: actionBox
width: childrenRect.width + 20 width: childrenRect.width + 20
color: theme.backgroundDark color: theme.containerBackground
border.color: theme.yellowAccent
border.width: 1 border.width: 1
radius: 10 radius: 10
Layout.row: 1 Layout.row: 1
@ -122,7 +124,7 @@ MyDialog {
ColumnLayout { ColumnLayout {
spacing: 0 spacing: 0
MyButton { MySettingsButton {
id: downloadButton id: downloadButton
text: isDownloading ? qsTr("Cancel") : isIncomplete ? qsTr("Resume") : qsTr("Download") text: isDownloading ? qsTr("Cancel") : isIncomplete ? qsTr("Resume") : qsTr("Download")
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
@ -133,12 +135,6 @@ MyDialog {
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
visible: !isChatGPT && !installed && !calcHash && downloadError === "" visible: !isChatGPT && !installed && !calcHash && downloadError === ""
Accessible.description: qsTr("Stop/restart/start the download") Accessible.description: qsTr("Stop/restart/start the download")
background: Rectangle {
border.color: downloadButton.down ? theme.backgroundLightest : theme.buttonBorder
border.width: 2
radius: 10
color: downloadButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
}
onClicked: { onClicked: {
if (!isDownloading) { if (!isDownloading) {
Download.downloadModel(filename); Download.downloadModel(filename);
@ -148,10 +144,9 @@ MyDialog {
} }
} }
MyButton { MySettingsDestructiveButton {
id: removeButton id: removeButton
text: qsTr("Remove") text: qsTr("Remove")
font.pixelSize: theme.fontSizeLarge
Layout.topMargin: 20 Layout.topMargin: 20
Layout.leftMargin: 20 Layout.leftMargin: 20
Layout.minimumWidth: openaiKey.width Layout.minimumWidth: openaiKey.width
@ -159,18 +154,12 @@ MyDialog {
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
visible: installed || downloadError !== "" visible: installed || downloadError !== ""
Accessible.description: qsTr("Remove model from filesystem") Accessible.description: qsTr("Remove model from filesystem")
background: Rectangle {
border.color: removeButton.down ? theme.backgroundLightest : theme.buttonBorder
border.width: 2
radius: 10
color: removeButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
}
onClicked: { onClicked: {
Download.removeModel(filename); Download.removeModel(filename);
} }
} }
MyButton { MySettingsButton {
id: installButton id: installButton
visible: !installed && isChatGPT visible: !installed && isChatGPT
Layout.topMargin: 20 Layout.topMargin: 20
@ -180,12 +169,6 @@ MyDialog {
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
text: qsTr("Install") text: qsTr("Install")
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
background: Rectangle {
border.color: installButton.down ? theme.backgroundLightest : theme.buttonBorder
border.width: 2
radius: 10
color: installButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
}
onClicked: { onClicked: {
if (openaiKey.text === "") if (openaiKey.text === "")
openaiKey.showError(); openaiKey.showError();
@ -285,7 +268,7 @@ MyDialog {
value: bytesReceived / bytesTotal value: bytesReceived / bytesTotal
background: Rectangle { background: Rectangle {
implicitHeight: 45 implicitHeight: 45
color: theme.backgroundDarkest color: theme.progressBackground
radius: 3 radius: 3
} }
contentItem: Item { contentItem: Item {
@ -295,7 +278,7 @@ MyDialog {
width: itemProgressBar.visualPosition * parent.width width: itemProgressBar.visualPosition * parent.width
height: parent.height height: parent.height
radius: 2 radius: 2
color: theme.assistantColor color: theme.progressForeground
} }
} }
Accessible.role: Accessible.ProgressBar Accessible.role: Accessible.ProgressBar
@ -350,21 +333,14 @@ MyDialog {
Layout.minimumWidth: 150 Layout.minimumWidth: 150
Layout.maximumWidth: textMetrics.width + 25 Layout.maximumWidth: textMetrics.width + 25
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
color: theme.textColor
background: Rectangle {
color: theme.backgroundLighter
radius: 10
}
wrapMode: Text.WrapAnywhere wrapMode: Text.WrapAnywhere
function showError() { function showError() {
openaiKey.placeholderTextColor = theme.textErrorColor openaiKey.placeholderTextColor = theme.textErrorColor
} }
onTextChanged: { onTextChanged: {
openaiKey.placeholderTextColor = theme.backgroundLightest openaiKey.placeholderTextColor = theme.mutedTextColor
} }
placeholderText: qsTr("enter $OPENAI_API_KEY") placeholderText: qsTr("enter $OPENAI_API_KEY")
font.pixelSize: theme.fontSizeLarge
placeholderTextColor: theme.backgroundLightest
Accessible.role: Accessible.EditableText Accessible.role: Accessible.EditableText
Accessible.name: placeholderText Accessible.name: placeholderText
Accessible.description: qsTr("Whether the file hash is being calculated") Accessible.description: qsTr("Whether the file hash is being calculated")
@ -402,18 +378,12 @@ MyDialog {
Rectangle { Rectangle {
width: modelListView.width width: modelListView.width
height: expandButton.height + 80 height: expandButton.height + 80
color: ModelList.downloadableModels.count % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter color: ModelList.downloadableModels.count % 2 === 0 ? theme.darkContrast : theme.lightContrast
MyButton { MySettingsButton {
id: expandButton id: expandButton
anchors.centerIn: parent anchors.centerIn: parent
padding: 40 padding: 40
text: ModelList.downloadableModels.expanded ? qsTr("Show fewer models") : qsTr("Show more models") text: ModelList.downloadableModels.expanded ? qsTr("Show fewer models") : qsTr("Show more models")
background: Rectangle {
border.color: expandButton.down ? theme.backgroundLightest : theme.buttonBorder
border.width: 2
radius: 10
color: expandButton.hovered ? theme.backgroundDark : theme.backgroundDarkest
}
onClicked: { onClicked: {
ModelList.downloadableModels.expanded = !ModelList.downloadableModels.expanded; ModelList.downloadableModels.expanded = !ModelList.downloadableModels.expanded;
} }
@ -435,9 +405,9 @@ MyDialog {
MySettings.modelPath = selectedFolder MySettings.modelPath = selectedFolder
} }
} }
Label { MySettingsLabel {
id: modelPathLabel id: modelPathLabel
text: qsTr("Download path:") text: qsTr("Download path")
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
color: theme.textColor color: theme.textColor
Layout.row: 1 Layout.row: 1
@ -461,7 +431,7 @@ MyDialog {
} }
} }
} }
MyButton { MySettingsButton {
text: qsTr("Browse") text: qsTr("Browse")
Accessible.description: qsTr("Choose where to save model files") Accessible.description: qsTr("Choose where to save model files")
onClicked: modelPathDialog.open() onClicked: modelPathDialog.open()

132
gpt4all-chat/qml/ModelSettings.qml
View File

@ -21,13 +21,11 @@ MySettingsTab {
property var currentModelId: comboBox.currentValue property var currentModelId: comboBox.currentValue
property var currentModelInfo: ModelList.modelInfo(root.currentModelId) property var currentModelInfo: ModelList.modelInfo(root.currentModelId)
Label { MySettingsLabel {
id: label id: label
Layout.row: 0 Layout.row: 0
Layout.column: 0 Layout.column: 0
text: qsTr("Model/Character:") text: qsTr("Model/Character")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
} }
RowLayout { RowLayout {
@ -64,13 +62,13 @@ MySettingsTab {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
background: Rectangle { background: Rectangle {
color: highlighted ? theme.backgroundLight : theme.backgroundDark color: highlighted ? theme.lightContrast : theme.darkContrast
} }
highlighted: comboBox.highlightedIndex === index highlighted: comboBox.highlightedIndex === index
} }
} }
MyButton { MySettingsButton {
id: cloneButton id: cloneButton
text: qsTr("Clone") text: qsTr("Clone")
onClicked: { onClicked: {
@ -79,7 +77,7 @@ MySettingsTab {
} }
} }
MyButton { MySettingsDestructiveButton {
id: removeButton id: removeButton
enabled: root.currentModelInfo.isClone enabled: root.currentModelInfo.isClone
text: qsTr("Remove") text: qsTr("Remove")
@ -95,18 +93,15 @@ MySettingsTab {
Layout.column: 0 Layout.column: 0
Layout.topMargin: 15 Layout.topMargin: 15
spacing: 10 spacing: 10
Label { MySettingsLabel {
id: uniqueNameLabel id: uniqueNameLabel
text: qsTr("Unique Name:") text: qsTr("Unique Name")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
} }
Label { MySettingsLabel {
id: uniqueNameLabelHelp id: uniqueNameLabelHelp
visible: false visible: false
text: qsTr("Must contain a non-empty unique name that does not match any existing model/character.") text: qsTr("Must contain a non-empty unique name that does not match any existing model/character.")
color: theme.textErrorColor color: theme.textErrorColor
font.pixelSize: theme.fontSizeLarge
wrapMode: TextArea.Wrap wrapMode: TextArea.Wrap
} }
} }
@ -116,7 +111,6 @@ MySettingsTab {
text: root.currentModelName text: root.currentModelName
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
enabled: root.currentModelInfo.isClone || root.currentModelInfo.description === "" enabled: root.currentModelInfo.isClone || root.currentModelInfo.description === ""
color: enabled ? theme.textColor : theme.mutedTextColor
Layout.row: 3 Layout.row: 3
Layout.column: 0 Layout.column: 0
Layout.columnSpan: 2 Layout.columnSpan: 2
@ -142,10 +136,8 @@ MySettingsTab {
} }
} }
Label { MySettingsLabel {
text: qsTr("Model File:") text: qsTr("Model File")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 4 Layout.row: 4
Layout.column: 0 Layout.column: 0
Layout.topMargin: 15 Layout.topMargin: 15
@ -155,18 +147,15 @@ MySettingsTab {
text: root.currentModelInfo.filename text: root.currentModelInfo.filename
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
enabled: false enabled: false
color: enabled ? theme.textColor : theme.mutedTextColor
Layout.row: 5 Layout.row: 5
Layout.column: 0 Layout.column: 0
Layout.columnSpan: 2 Layout.columnSpan: 2
Layout.fillWidth: true Layout.fillWidth: true
} }
Label { MySettingsLabel {
visible: !root.currentModelInfo.isChatGPT visible: !root.currentModelInfo.isChatGPT
text: qsTr("System Prompt:") text: qsTr("System Prompt")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 6 Layout.row: 6
Layout.column: 0 Layout.column: 0
Layout.topMargin: 15 Layout.topMargin: 15
@ -181,18 +170,10 @@ MySettingsTab {
Layout.fillWidth: true Layout.fillWidth: true
color: "transparent" color: "transparent"
Layout.minimumHeight: Math.max(100, systemPromptArea.contentHeight + 20) Layout.minimumHeight: Math.max(100, systemPromptArea.contentHeight + 20)
TextArea { MyTextArea {
id: systemPromptArea id: systemPromptArea
anchors.fill: parent anchors.fill: parent
text: root.currentModelInfo.systemPrompt text: root.currentModelInfo.systemPrompt
color: theme.textColor
background: Rectangle {
implicitWidth: 150
color: theme.backgroundDark
radius: 10
}
padding: 10
wrapMode: TextArea.Wrap
Connections { Connections {
target: MySettings target: MySettings
function onSystemPromptChanged() { function onSystemPromptChanged() {
@ -208,10 +189,10 @@ MySettingsTab {
onTextChanged: { onTextChanged: {
MySettings.setModelSystemPrompt(root.currentModelInfo, text) MySettings.setModelSystemPrompt(root.currentModelInfo, text)
} }
bottomPadding: 10
Accessible.role: Accessible.EditableText Accessible.role: Accessible.EditableText
ToolTip.text: qsTr("The systemPrompt allows instructions to the model at the beginning of a chat.\nNOTE: A longer, detailed system prompt can lead to higher quality answers, but can also slow down generation.") ToolTip.text: qsTr("The systemPrompt allows instructions to the model at the beginning of a chat.\nNOTE: A longer, detailed system prompt can lead to higher quality answers, but can also slow down generation.")
ToolTip.visible: hovered ToolTip.visible: hovered
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
} }
} }
@ -221,17 +202,14 @@ MySettingsTab {
Layout.columnSpan: 2 Layout.columnSpan: 2
Layout.topMargin: 15 Layout.topMargin: 15
spacing: 10 spacing: 10
Label { MySettingsLabel {
id: promptTemplateLabel id: promptTemplateLabel
text: qsTr("Prompt Template:") text: qsTr("Prompt Template")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
} }
Label { MySettingsLabel {
id: promptTemplateLabelHelp id: promptTemplateLabelHelp
text: qsTr("Must contain the string \"%1\" to be replaced with the user's input.") text: qsTr("Must contain the string \"%1\" to be replaced with the user's input.")
color: theme.textErrorColor color: theme.textErrorColor
font.pixelSize: theme.fontSizeLarge
visible: templateTextArea.text.indexOf("%1") === -1 visible: templateTextArea.text.indexOf("%1") === -1
wrapMode: TextArea.Wrap wrapMode: TextArea.Wrap
} }
@ -246,19 +224,10 @@ MySettingsTab {
Layout.minimumHeight: Math.max(100, templateTextArea.contentHeight + 20) Layout.minimumHeight: Math.max(100, templateTextArea.contentHeight + 20)
color: "transparent" color: "transparent"
clip: true clip: true
TextArea { MyTextArea {
id: templateTextArea id: templateTextArea
anchors.fill: parent anchors.fill: parent
text: root.currentModelInfo.promptTemplate text: root.currentModelInfo.promptTemplate
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
background: Rectangle {
implicitWidth: 150
color: theme.backgroundDark
radius: 10
}
padding: 10
wrapMode: TextArea.Wrap
Connections { Connections {
target: MySettings target: MySettings
function onPromptTemplateChanged() { function onPromptTemplateChanged() {
@ -276,12 +245,12 @@ MySettingsTab {
MySettings.setModelPromptTemplate(root.currentModelInfo, text) MySettings.setModelPromptTemplate(root.currentModelInfo, text)
} }
} }
bottomPadding: 10
Accessible.role: Accessible.EditableText Accessible.role: Accessible.EditableText
Accessible.name: promptTemplateLabel.text Accessible.name: promptTemplateLabel.text
Accessible.description: promptTemplateLabelHelp.text Accessible.description: promptTemplateLabelHelp.text
ToolTip.text: qsTr("The prompt template partially determines how models will respond to prompts.\nNOTE: A longer, detailed template can lead to higher quality answers, but can also slow down generation.") ToolTip.text: qsTr("The prompt template partially determines how models will respond to prompts.\nNOTE: A longer, detailed template can lead to higher quality answers, but can also slow down generation.")
ToolTip.visible: hovered ToolTip.visible: hovered
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
} }
} }
@ -298,8 +267,6 @@ MySettingsTab {
Layout.bottomMargin: 35 Layout.bottomMargin: 35
Layout.leftMargin: 35 Layout.leftMargin: 35
width: 3000 width: 3000
border.width: 1
border.color: theme.tabBorder
radius: 10 radius: 10
color: "transparent" color: "transparent"
Item { Item {
@ -324,9 +291,8 @@ MySettingsTab {
} }
} }
Label { MySettingsLabel {
text: qsTr("Generation Settings") text: qsTr("Generation Settings")
color: theme.textColor
Layout.row: 10 Layout.row: 10
Layout.column: 0 Layout.column: 0
Layout.columnSpan: 2 Layout.columnSpan: 2
@ -334,7 +300,7 @@ MySettingsTab {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Layout.minimumWidth: promptTemplate.width Layout.minimumWidth: promptTemplate.width
horizontalAlignment: Qt.AlignHCenter horizontalAlignment: Qt.AlignHCenter
font.pixelSize: theme.fontSizeLarger font.pixelSize: theme.fontSizeLarge
font.bold: true font.bold: true
} }
@ -349,12 +315,10 @@ MySettingsTab {
rowSpacing: 10 rowSpacing: 10
columnSpacing: 10 columnSpacing: 10
Label { MySettingsLabel {
id: contextLengthLabel id: contextLengthLabel
visible: !root.currentModelInfo.isChatGPT visible: !root.currentModelInfo.isChatGPT
text: qsTr("Context Length:") text: qsTr("Context Length")
font.pixelSize: theme.fontSizeLarge
color: theme.textColor
Layout.row: 0 Layout.row: 0
Layout.column: 0 Layout.column: 0
} }
@ -362,8 +326,8 @@ MySettingsTab {
id: contextLengthField id: contextLengthField
visible: !root.currentModelInfo.isChatGPT visible: !root.currentModelInfo.isChatGPT
text: root.currentModelInfo.contextLength text: root.currentModelInfo.contextLength
color: theme.textColor
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
color: theme.textColor
ToolTip.text: qsTr("Maximum combined prompt/response tokens before information is lost.\nUsing more context than the model was trained on will yield poor results.\nNOTE: Does not take effect until you RESTART GPT4All or SWITCH MODELS.") ToolTip.text: qsTr("Maximum combined prompt/response tokens before information is lost.\nUsing more context than the model was trained on will yield poor results.\nNOTE: Does not take effect until you RESTART GPT4All or SWITCH MODELS.")
ToolTip.visible: hovered ToolTip.visible: hovered
Layout.row: 0 Layout.row: 0
@ -397,11 +361,9 @@ MySettingsTab {
Accessible.description: ToolTip.text Accessible.description: ToolTip.text
} }
Label { MySettingsLabel {
id: tempLabel id: tempLabel
text: qsTr("Temperature:") text: qsTr("Temperature")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 1 Layout.row: 1
Layout.column: 2 Layout.column: 2
} }
@ -409,8 +371,8 @@ MySettingsTab {
MyTextField { MyTextField {
id: temperatureField id: temperatureField
text: root.currentModelInfo.temperature text: root.currentModelInfo.temperature
color: theme.textColor
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
color: theme.textColor
ToolTip.text: qsTr("Temperature increases the chances of choosing less likely tokens.\nNOTE: Higher temperature gives more creative but less predictable outputs.") ToolTip.text: qsTr("Temperature increases the chances of choosing less likely tokens.\nNOTE: Higher temperature gives more creative but less predictable outputs.")
ToolTip.visible: hovered ToolTip.visible: hovered
Layout.row: 1 Layout.row: 1
@ -443,11 +405,9 @@ MySettingsTab {
Accessible.name: tempLabel.text Accessible.name: tempLabel.text
Accessible.description: ToolTip.text Accessible.description: ToolTip.text
} }
Label { MySettingsLabel {
id: topPLabel id: topPLabel
text: qsTr("Top P:") text: qsTr("Top P")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 2 Layout.row: 2
Layout.column: 0 Layout.column: 0
} }
@ -488,12 +448,10 @@ MySettingsTab {
Accessible.name: topPLabel.text Accessible.name: topPLabel.text
Accessible.description: ToolTip.text Accessible.description: ToolTip.text
} }
Label { MySettingsLabel {
id: topKLabel id: topKLabel
visible: !root.currentModelInfo.isChatGPT visible: !root.currentModelInfo.isChatGPT
text: qsTr("Top K:") text: qsTr("Top K")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 2 Layout.row: 2
Layout.column: 2 Layout.column: 2
} }
@ -535,12 +493,10 @@ MySettingsTab {
Accessible.name: topKLabel.text Accessible.name: topKLabel.text
Accessible.description: ToolTip.text Accessible.description: ToolTip.text
} }
Label { MySettingsLabel {
id: maxLengthLabel id: maxLengthLabel
visible: !root.currentModelInfo.isChatGPT visible: !root.currentModelInfo.isChatGPT
text: qsTr("Max Length:") text: qsTr("Max Length")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 0 Layout.row: 0
Layout.column: 2 Layout.column: 2
} }
@ -583,12 +539,10 @@ MySettingsTab {
Accessible.description: ToolTip.text Accessible.description: ToolTip.text
} }
Label { MySettingsLabel {
id: batchSizeLabel id: batchSizeLabel
visible: !root.currentModelInfo.isChatGPT visible: !root.currentModelInfo.isChatGPT
text: qsTr("Prompt Batch Size:") text: qsTr("Prompt Batch Size")
font.pixelSize: theme.fontSizeLarge
color: theme.textColor
Layout.row: 1 Layout.row: 1
Layout.column: 0 Layout.column: 0
} }
@ -630,12 +584,10 @@ MySettingsTab {
Accessible.name: batchSizeLabel.text Accessible.name: batchSizeLabel.text
Accessible.description: ToolTip.text Accessible.description: ToolTip.text
} }
Label { MySettingsLabel {
id: repeatPenaltyLabel id: repeatPenaltyLabel
visible: !root.currentModelInfo.isChatGPT visible: !root.currentModelInfo.isChatGPT
text: qsTr("Repeat Penalty:") text: qsTr("Repeat Penalty")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 3 Layout.row: 3
Layout.column: 0 Layout.column: 0
} }
@ -677,12 +629,10 @@ MySettingsTab {
Accessible.name: repeatPenaltyLabel.text Accessible.name: repeatPenaltyLabel.text
Accessible.description: ToolTip.text Accessible.description: ToolTip.text
} }
Label { MySettingsLabel {
id: repeatPenaltyTokensLabel id: repeatPenaltyTokensLabel
visible: !root.currentModelInfo.isChatGPT visible: !root.currentModelInfo.isChatGPT
text: qsTr("Repeat Penalty Tokens:") text: qsTr("Repeat Penalty Tokens")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
Layout.row: 3 Layout.row: 3
Layout.column: 2 Layout.column: 2
} }
@ -733,8 +683,8 @@ MySettingsTab {
Layout.topMargin: 15 Layout.topMargin: 15
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumWidth: promptTemplate.width Layout.minimumWidth: promptTemplate.width
height: 1 height: 3
color: theme.tabBorder color: theme.yellowAccent
} }
} }
} }

2
gpt4all-chat/qml/MyBusyIndicator.qml
View File

@ -43,7 +43,7 @@ BusyIndicator {
implicitWidth: 10 implicitWidth: 10
implicitHeight: 10 implicitHeight: 10
radius: 5 radius: 5
color: theme.textAccent color: theme.yellowAccent
required property int index required property int index

20
gpt4all-chat/qml/MyButton.qml
View File

@ -6,20 +6,30 @@ import QtQuick.Controls.Basic
Button { Button {
id: myButton id: myButton
padding: 10 padding: 10
rightPadding: 18
leftPadding: 18
property color textColor: theme.oppositeTextColor
property color mutedTextColor: theme.oppositeMutedTextColor
property color backgroundColor: theme.buttonBackground
property color backgroundColorHovered: theme.buttonBackgroundHovered
property real borderWidth: 0
property color borderColor: "transparent"
property real fontPixelSize: theme.fontSizeLarge
contentItem: Text { contentItem: Text {
text: myButton.text text: myButton.text
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
color: myButton.enabled ? theme.textColor : theme.mutedTextColor color: myButton.enabled ? textColor : mutedTextColor
font.pixelSize: theme.fontSizeLarge font.pixelSize: fontPixelSize
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
Accessible.name: text Accessible.name: text
} }
background: Rectangle { background: Rectangle {
border.color: myButton.down ? theme.backgroundLightest : theme.buttonBorder
border.width: 2
radius: 10 radius: 10
color: myButton.hovered ? theme.backgroundDark : theme.backgroundDarkest border.width: borderWidth
border.color: borderColor
color: myButton.hovered ? backgroundColorHovered : backgroundColor
} }
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
Accessible.name: text Accessible.name: text
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
} }

9
gpt4all-chat/qml/MyCheckBox.qml
View File

@ -15,15 +15,17 @@ CheckBox {
implicitHeight: 26 implicitHeight: 26
x: myCheckBox.leftPadding x: myCheckBox.leftPadding
y: parent.height / 2 - height / 2 y: parent.height / 2 - height / 2
border.color: theme.dialogBorder border.color: theme.gray200
color: "transparent" color: theme.white
radius: 3
Rectangle { Rectangle {
width: 14 width: 14
height: 14 height: 14
x: 6 x: 6
y: 6 y: 6
color: theme.textColor radius: 2
color: theme.green600
visible: myCheckBox.checked visible: myCheckBox.checked
} }
} }
@ -36,4 +38,5 @@ CheckBox {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
leftPadding: myCheckBox.indicator.width + myCheckBox.spacing leftPadding: myCheckBox.indicator.width + myCheckBox.spacing
} }
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
} }

11
gpt4all-chat/qml/MyComboBox.qml
View File

@ -28,7 +28,7 @@ ComboBox {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
background: Rectangle { background: Rectangle {
color: highlighted ? theme.backgroundLight : theme.backgroundDark color: highlighted ? theme.lightContrast : theme.darkContrast
} }
highlighted: comboBox.highlightedIndex === index highlighted: comboBox.highlightedIndex === index
} }
@ -47,7 +47,7 @@ ComboBox {
} }
background: Rectangle { background: Rectangle {
color: theme.backgroundDark color: theme.black
} }
} }
indicator: Canvas { indicator: Canvas {
@ -73,13 +73,16 @@ ComboBox {
context.moveTo(0, height / 2 + 2); context.moveTo(0, height / 2 + 2);
context.lineTo(width / 2, height); context.lineTo(width / 2, height);
context.lineTo(width, height / 2 + 2); context.lineTo(width, height / 2 + 2);
context.strokeStyle = comboBox.pressed ? theme.textAccent : theme.mutedTextColor; context.strokeStyle = comboBox.pressed ? theme.gray400 : theme.gray300;
context.stroke(); context.stroke();
} }
} }
background: Rectangle { background: Rectangle {
color: theme.backgroundDark color: theme.controlBackground
border.width: 1
border.color: theme.controlBorder
radius: 10 radius: 10
} }
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
} }

4
gpt4all-chat/qml/MyDialog.qml
View File

@ -11,7 +11,7 @@ Dialog {
background: Rectangle { background: Rectangle {
width: parent.width width: parent.width
height: parent.height height: parent.height
color: theme.backgroundDarkest color: theme.containerBackground
border.width: 1 border.width: 1
border.color: theme.dialogBorder border.color: theme.dialogBorder
radius: 10 radius: 10
@ -23,7 +23,7 @@ Dialog {
anchors.centerIn: myCloseButton anchors.centerIn: myCloseButton
width: myCloseButton.width + 10 width: myCloseButton.width + 10
height: myCloseButton.height + 10 height: myCloseButton.height + 10
color: theme.backgroundDarkest color: theme.containerBackground
} }
MyToolButton { MyToolButton {

3
gpt4all-chat/qml/MyDirectoryField.qml
View File

@ -11,7 +11,8 @@ TextField {
color: text === "" || isValid ? theme.textColor : theme.textErrorColor color: text === "" || isValid ? theme.textColor : theme.textErrorColor
background: Rectangle { background: Rectangle {
implicitWidth: 150 implicitWidth: 150
color: theme.backgroundDark color: theme.controlBackground
radius: 10 radius: 10
} }
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
} }

38
gpt4all-chat/qml/MySettingsButton.qml Normal file
View File

@ -0,0 +1,38 @@
import QtCore
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import mysettings
Button {
id: myButton
padding: 10
rightPadding: 18
leftPadding: 18
property color textColor: MySettings.chatTheme === "Dark" ? theme.green800 : theme.green600
property color mutedTextColor: textColor
property color backgroundColor: MySettings.chatTheme === "Dark" ? theme.green400 : theme.green200
property color backgroundColorHovered: theme.green300
property real borderWidth: 0
property color borderColor: "transparent"
property real fontPixelSize: theme.fontSizeLarge
contentItem: Text {
text: myButton.text
horizontalAlignment: Text.AlignHCenter
color: myButton.enabled ? textColor : mutedTextColor
font.pixelSize: fontPixelSize
font.bold: true
Accessible.role: Accessible.Button
Accessible.name: text
}
background: Rectangle {
radius: 10
border.width: borderWidth
border.color: borderColor
color: myButton.hovered ? backgroundColorHovered : backgroundColor
}
Accessible.role: Accessible.Button
Accessible.name: text
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
}

38
gpt4all-chat/qml/MySettingsDestructiveButton.qml Normal file
View File

@ -0,0 +1,38 @@
import QtCore
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import mysettings
Button {
id: myButton
padding: 10
rightPadding: 18
leftPadding: 18
font.pixelSize: theme.fontSizeLarge
property color textColor: MySettings.chatTheme === "Dark" ? theme.red800 : theme.red600
property color mutedTextColor: MySettings.chatTheme === "Dark" ? theme.red400 : theme.red300
property color backgroundColor: enabled ? (MySettings.chatTheme === "Dark" ? theme.red400 : theme.red200) :
(MySettings.chatTheme === "Dark" ? theme.red200 : theme.red100)
property color backgroundColorHovered: enabled ? (MySettings.chatTheme === "Dark" ? theme.red500 : theme.red300) : backgroundColor
property real borderWidth: 0
property color borderColor: "transparent"
contentItem: Text {
text: myButton.text
horizontalAlignment: Text.AlignHCenter
color: myButton.enabled ? textColor : mutedTextColor
font.pixelSize: theme.fontSizeLarge
font.bold: true
Accessible.role: Accessible.Button
Accessible.name: text
}
background: Rectangle {
radius: 10
border.width: borderWidth
border.color: borderColor
color: myButton.hovered ? backgroundColorHovered : backgroundColor
}
Accessible.role: Accessible.Button
Accessible.name: text
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
}

10
gpt4all-chat/qml/MySettingsLabel.qml Normal file
View File

@ -0,0 +1,10 @@
import QtCore
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
Label {
color: theme.titleTextColor
font.pixelSize: theme.fontSizeLarge - 4
font.bold: true
}

43
gpt4all-chat/qml/MySettingsStack.qml
View File

@ -14,28 +14,38 @@ Item {
id: theme id: theme
} }
property alias title: titleLabel.text property alias title: titleLabelText.text
property ListModel tabTitlesModel: ListModel { } property ListModel tabTitlesModel: ListModel { }
property list<Component> tabs: [ ] property list<Component> tabs: [ ]
Label { Rectangle {
id: titleLabel id: titleLabel
anchors.top: parent.top anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter anchors.leftMargin: 20
color: theme.textColor anchors.rightMargin: 15
padding: 10 anchors.left: parent.left
anchors.right: parent.right
height: titleLabelText.height
color: "transparent"
Label {
id: titleLabelText
anchors.left: parent.left
color: theme.titleTextColor
topPadding: 10
bottomPadding: 10
font.pixelSize: theme.fontSizeLargest
font.bold: true font.bold: true
font.pixelSize: theme.fontSizeLarger }
} }
Rectangle { Rectangle {
anchors.top: titleLabel.bottom anchors.top: titleLabel.bottom
anchors.leftMargin: 15 anchors.leftMargin: 20
anchors.rightMargin: 15 anchors.rightMargin: 15
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: 1 height: 3
color: theme.tabBorder color: theme.yellowAccent
} }
TabBar { TabBar {
@ -62,9 +72,6 @@ Item {
} }
background: Rectangle { background: Rectangle {
color: "transparent" color: "transparent"
border.width: 1
border.color: tabButton.checked ? theme.tabBorder : "transparent"
radius: 10
} }
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
Accessible.name: model.title Accessible.name: model.title
@ -82,16 +89,8 @@ Item {
anchors.rightMargin: 15 anchors.rightMargin: 15
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: 1 height: 3
color: theme.tabBorder color: theme.yellowAccent
}
Rectangle {
anchors.fill: parent
color: "transparent"
radius: 10
border.width: 1
border.color: theme.tabBorder
} }
FolderDialog { FolderDialog {

16
gpt4all-chat/qml/MySettingsTab.qml
View File

@ -32,13 +32,19 @@ Item {
} }
ScrollView { ScrollView {
id: scrollView
width: parent.width width: parent.width
height: parent.height height: parent.height
padding: 15 topPadding: 15
rightPadding: 20 leftPadding: 5
contentWidth: availableWidth contentWidth: availableWidth
contentHeight: innerColumn.height contentHeight: innerColumn.height
ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.vertical: ScrollBar {
parent: scrollView.parent
anchors.top: scrollView.top
anchors.left: scrollView.right
anchors.bottom: scrollView.bottom
}
Theme { Theme {
id: theme id: theme
@ -64,7 +70,7 @@ Item {
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
height: restoreDefaultsButton.height height: restoreDefaultsButton.height
MyButton { MySettingsButton {
id: restoreDefaultsButton id: restoreDefaultsButton
anchors.left: parent.left anchors.left: parent.left
visible: showRestoreDefaultsButton visible: showRestoreDefaultsButton
@ -78,7 +84,7 @@ Item {
root.restoreDefaultsClicked(); root.restoreDefaultsClicked();
} }
} }
MyButton { MySettingsButton {
id: advancedSettingsButton id: advancedSettingsButton
anchors.right: parent.right anchors.right: parent.right
visible: root.advancedSettings && showAdvancedSettingsButton visible: root.advancedSettings && showAdvancedSettingsButton

24
gpt4all-chat/qml/MySlug.qml Normal file
View File

@ -0,0 +1,24 @@
import QtCore
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
Label {
id: mySlug
padding: 3
rightPadding: 9
leftPadding: 9
font.pixelSize: theme.fontSizeFixedSmall
background: Rectangle {
radius: 6
border.width: 1
border.color: mySlug.color
color: theme.slugBackground
}
ToolTip.visible: ma.containsMouse && ToolTip.text !== ""
MouseArea {
id: ma
anchors.fill: parent
hoverEnabled: true
}
}

22
gpt4all-chat/qml/MyTextArea.qml Normal file
View File

@ -0,0 +1,22 @@
import QtCore
import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
TextArea {
id: myTextArea
color: enabled ? theme.textColor : theme.mutedTextColor
placeholderTextColor: theme.mutedTextColor
font.pixelSize: theme.fontSizeLarge
background: Rectangle {
implicitWidth: 150
color: theme.controlBackground
border.width: 1
border.color: theme.controlBorder
radius: 10
}
padding: 10
wrapMode: TextArea.Wrap
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
}

8
gpt4all-chat/qml/MyTextField.qml
View File

@ -6,10 +6,14 @@ import QtQuick.Controls.Basic
TextField { TextField {
id: myTextField id: myTextField
padding: 10 padding: 10
placeholderTextColor: theme.mutedTextColor
background: Rectangle { background: Rectangle {
implicitWidth: 150 implicitWidth: 150
color: theme.backgroundDark color: myTextField.enabled ? theme.controlBackground : theme.disabledControlBackground
border.width: 1
border.color: theme.controlBorder
radius: 10 radius: 10
} }
color: theme.textColor ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
color: enabled ? theme.textColor : theme.mutedTextColor
} }

7
gpt4all-chat/qml/MyToolButton.qml
View File

@ -7,6 +7,8 @@ import Qt5Compat.GraphicalEffects
Button { Button {
id: myButton id: myButton
padding: 10 padding: 10
property color backgroundColor: theme.iconBackgroundDark
property color backgroundColorHovered: theme.iconBackgroundHovered
property bool toggled: false property bool toggled: false
property alias source: image.source property alias source: image.source
property alias fillMode: image.fillMode property alias fillMode: image.fillMode
@ -25,7 +27,7 @@ Button {
anchors.fill: parent anchors.fill: parent
color: "transparent" color: "transparent"
visible: myButton.toggled visible: myButton.toggled
border.color: theme.backgroundLightest border.color: theme.yellowAccent
border.width: 1 border.width: 1
radius: 10 radius: 10
} }
@ -39,9 +41,10 @@ Button {
ColorOverlay { ColorOverlay {
anchors.fill: image anchors.fill: image
source: image source: image
color: myButton.hovered ? theme.textColor : "transparent" color: myButton.hovered ? backgroundColorHovered : backgroundColor
} }
} }
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
Accessible.name: text Accessible.name: text
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
} }

25
gpt4all-chat/qml/NetworkDialog.qml
View File

@ -12,7 +12,6 @@ MyDialog {
id: networkDialog id: networkDialog
anchors.centerIn: parent anchors.centerIn: parent
modal: true modal: true
opacity: 0.9
padding: 20 padding: 20
Theme { Theme {
@ -50,43 +49,27 @@ MyDialog {
ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
TextArea { MyTextArea {
id: textOptIn id: textOptIn
wrapMode: Text.Wrap
width: 1024 - 40 width: 1024 - 40
padding: 20
text: qsTr("By enabling this feature, you will be able to participate in the democratic process of training a large language model by contributing data for future model improvements. text: qsTr("By enabling this feature, you will be able to participate in the democratic process of training a large language model by contributing data for future model improvements.
When a GPT4All model responds to you and you have opted-in, your conversation will be sent to the GPT4All Open Source Datalake. Additionally, you can like/dislike its response. If you dislike a response, you can suggest an alternative response. This data will be collected and aggregated in the GPT4All Datalake. When a GPT4All model responds to you and you have opted-in, your conversation will be sent to the GPT4All Open Source Datalake. Additionally, you can like/dislike its response. If you dislike a response, you can suggest an alternative response. This data will be collected and aggregated in the GPT4All Datalake.
NOTE: By turning on this feature, you will be sending your data to the GPT4All Open Source Datalake. You should have no expectation of chat privacy when this feature is enabled. You should; however, have an expectation of an optional attribution if you wish. Your chat data will be openly available for anyone to download and will be used by Nomic AI to improve future GPT4All models. Nomic AI will retain all attribution information attached to your data and you will be credited as a contributor to any GPT4All model release that uses your data!") NOTE: By turning on this feature, you will be sending your data to the GPT4All Open Source Datalake. You should have no expectation of chat privacy when this feature is enabled. You should; however, have an expectation of an optional attribution if you wish. Your chat data will be openly available for anyone to download and will be used by Nomic AI to improve future GPT4All models. Nomic AI will retain all attribution information attached to your data and you will be credited as a contributor to any GPT4All model release that uses your data!")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
focus: false focus: false
readOnly: true readOnly: true
Accessible.role: Accessible.Paragraph Accessible.role: Accessible.Paragraph
Accessible.name: qsTr("Terms for opt-in") Accessible.name: qsTr("Terms for opt-in")
Accessible.description: qsTr("Describes what will happen when you opt-in") Accessible.description: qsTr("Describes what will happen when you opt-in")
background: Rectangle {
color: theme.backgroundLight
radius: 10
}
} }
} }
TextField { MyTextField {
id: attribution id: attribution
color: theme.textColor
padding: 20
width: parent.width width: parent.width
text: MySettings.networkAttribution text: MySettings.networkAttribution
font.pixelSize: theme.fontSizeLarge
placeholderText: qsTr("Please provide a name for attribution (optional)") placeholderText: qsTr("Please provide a name for attribution (optional)")
placeholderTextColor: theme.backgroundLightest
background: Rectangle {
color: theme.backgroundLighter
radius: 10
}
Accessible.role: Accessible.EditableText Accessible.role: Accessible.EditableText
Accessible.name: qsTr("Attribution (optional)") Accessible.name: qsTr("Attribution (optional)")
Accessible.description: qsTr("Provide attribution") Accessible.description: qsTr("Provide attribution")
@ -101,12 +84,12 @@ NOTE: By turning on this feature, you will be sending your data to the GPT4All O
padding: 20 padding: 20
alignment: Qt.AlignRight alignment: Qt.AlignRight
spacing: 10 spacing: 10
MyButton { MySettingsButton {
text: qsTr("Enable") text: qsTr("Enable")
Accessible.description: qsTr("Enable opt-in") Accessible.description: qsTr("Enable opt-in")
DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
} }
MyButton { MySettingsButton {
text: qsTr("Cancel") text: qsTr("Cancel")
Accessible.description: qsTr("Cancel opt-in") Accessible.description: qsTr("Cancel opt-in")
DialogButtonBox.buttonRole: DialogButtonBox.RejectRole DialogButtonBox.buttonRole: DialogButtonBox.RejectRole

7
gpt4all-chat/qml/NewVersionDialog.qml
View File

@ -31,12 +31,13 @@ MyDialog {
anchors.left: parent.left anchors.left: parent.left
topPadding: 20 topPadding: 20
bottomPadding: 20 bottomPadding: 20
text: qsTr("New version is available:") text: qsTr("New version is available")
color: theme.textColor color: theme.titleTextColor
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
font.bold: true
} }
MyButton { MySettingsButton {
id: button id: button
anchors.left: label.right anchors.left: label.right
anchors.leftMargin: 10 anchors.leftMargin: 10

3
gpt4all-chat/qml/PopupDialog.qml
View File

@ -7,7 +7,6 @@ import QtQuick.Layouts
Dialog { Dialog {
id: popupDialog id: popupDialog
anchors.centerIn: parent anchors.centerIn: parent
opacity: 0.9
padding: 20 padding: 20
property alias text: textField.text property alias text: textField.text
property bool shouldTimeOut: true property bool shouldTimeOut: true
@ -53,7 +52,7 @@ Dialog {
background: Rectangle { background: Rectangle {
anchors.fill: parent anchors.fill: parent
color: theme.backgroundDarkest color: theme.containerBackground
border.width: 1 border.width: 1
border.color: theme.dialogBorder border.color: theme.dialogBorder
radius: 10 radius: 10

40
gpt4all-chat/qml/SettingsDialog.qml
View File

@ -41,51 +41,57 @@ MyDialog {
} }
} }
ScrollView { Rectangle {
id: stackList id: stackList
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.left: parent.left anchors.left: parent.left
width: 200 width: 220
color: theme.controlBackground
radius: 10
ScrollView {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 10
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
clip: true clip: true
ListView { ListView {
id: listView id: listView
anchors.fill: parent anchors.fill: parent
anchors.rightMargin: 10
model: stacksModel model: stacksModel
delegate: Rectangle { delegate: Rectangle {
id: item id: item
width: listView.width width: listView.width
height: titleLabel.height + 25 height: titleLabel.height + 10
color: "transparent" color: "transparent"
border.color: theme.backgroundLighter
border.width: index == listView.currentIndex ? 1 : 0
radius: 10
Text { MyButton {
id: titleLabel id: titleLabel
backgroundColor: index === listView.currentIndex ? theme.buttonBackground : theme.controlBackground
backgroundColorHovered: index === listView.currentIndex ? backgroundColor : theme.containerBackground
borderColor: index === listView.currentIndex ? theme.yellowAccent : "transparent"
borderWidth: index === listView.currentIndex ? 1 : 0
textColor: index === listView.currentIndex ? theme.oppositeTextColor : theme.titleTextColor
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.margins: 20 anchors.right: parent.right
font.bold: index == listView.currentIndex anchors.margins: 10
font.bold: index === listView.currentIndex
text: title text: title
font.pixelSize: theme.fontSizeLarge font.pixelSize: theme.fontSizeLarge
elide: Text.ElideRight onClicked: {
color: theme.textColor
width: 200
}
TapHandler {
onTapped: {
listView.currentIndex = index listView.currentIndex = index
} }
} }
} }
} }
} }
}
StackLayout { StackLayout {
id: stackLayout id: stackLayout

20
gpt4all-chat/qml/StartupDialog.qml
View File

@ -52,27 +52,19 @@ MyDialog {
ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
TextArea { MyTextArea {
id: welcome id: welcome
wrapMode: Text.Wrap
width: 1024 - 40 width: 1024 - 40
padding: 20
textFormat: TextEdit.MarkdownText textFormat: TextEdit.MarkdownText
text: qsTr("### Release notes\n") text: qsTr("### Release notes\n")
+ Download.releaseInfo.notes + Download.releaseInfo.notes
+ qsTr("### Contributors\n") + qsTr("### Contributors\n")
+ Download.releaseInfo.contributors + Download.releaseInfo.contributors
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
focus: false focus: false
readOnly: true readOnly: true
Accessible.role: Accessible.Paragraph Accessible.role: Accessible.Paragraph
Accessible.name: qsTr("Release notes") Accessible.name: qsTr("Release notes")
Accessible.description: qsTr("Release notes for this version") Accessible.description: qsTr("Release notes for this version")
background: Rectangle {
color: theme.backgroundLight
radius: 10
}
} }
} }
@ -83,11 +75,9 @@ MyDialog {
ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
TextArea { MyTextArea {
id: optInTerms id: optInTerms
wrapMode: Text.Wrap
width: 1024 - 40 width: 1024 - 40
padding: 20
textFormat: TextEdit.MarkdownText textFormat: TextEdit.MarkdownText
text: qsTr( text: qsTr(
"### Opt-ins for anonymous usage analytics and datalake "### Opt-ins for anonymous usage analytics and datalake
@ -105,17 +95,11 @@ to download and will be used by Nomic AI to improve future GPT4All models. Nomic
attribution information attached to your data and you will be credited as a contributor to any GPT4All attribution information attached to your data and you will be credited as a contributor to any GPT4All
model release that uses your data!") model release that uses your data!")
color: theme.textColor
font.pixelSize: theme.fontSizeLarge
focus: false focus: false
readOnly: true readOnly: true
Accessible.role: Accessible.Paragraph Accessible.role: Accessible.Paragraph
Accessible.name: qsTr("Terms for opt-in") Accessible.name: qsTr("Terms for opt-in")
Accessible.description: qsTr("Describes what will happen when you opt-in") Accessible.description: qsTr("Describes what will happen when you opt-in")
background: Rectangle {
color: theme.backgroundLight
radius: 10
}
} }
} }

162
gpt4all-chat/qml/Theme.qml
View File

@ -4,24 +4,146 @@ import QtQuick.Controls.Basic
import mysettings import mysettings
QtObject { QtObject {
property color textColor: MySettings.chatTheme == "Dark" ? "#d1d5db" : "#2e2e34"
property color textAccent: MySettings.chatTheme == "Dark" ? "#8e8ea0" : "#71717f"
property color mutedTextColor: MySettings.chatTheme == "Dark" ? backgroundLightest : "#AFAFB5"
property color backgroundDarkest: MySettings.chatTheme == "Dark" ? "#1c1f21" : "#e3e3e5"
property color backgroundDarker: MySettings.chatTheme == "Dark" ? "#1e2123" : "#e0dedc"
property color backgroundDark: MySettings.chatTheme == "Dark" ? "#222527" : "#D2D1D5"
property color backgroundLight: MySettings.chatTheme == "Dark" ? "#343541" : "#FFFFFF"
property color backgroundLighter: MySettings.chatTheme == "Dark" ? "#444654" : "#F7F7F8"
property color backgroundLightest: MySettings.chatTheme == "Dark" ? "#7d7d8e" : "#82827a"
property color backgroundAccent: MySettings.chatTheme == "Dark" ? "#40414f" : "#E3E3E6"
property color buttonBorder: MySettings.chatTheme == "Dark" ? "#565869" : "#a9a9b0"
property color dialogBorder: MySettings.chatTheme == "Dark" ? "#d1d5db" : "#2e2e34"
property color userColor: MySettings.chatTheme == "Dark" ? "#ec86bf" : "#137382"
property color linkColor: MySettings.chatTheme == "Dark" ? "#55aaff" : "#aa5500"
property color tabBorder: MySettings.chatTheme == "Dark" ? backgroundLight : backgroundDark
property color assistantColor: "#10a37f"
property color textErrorColor: "red"
property real fontSizeLarge: MySettings.fontSize == "Small" ? Qt.application.font.pixelSize : MySettings.fontSize == "Medium" ? Qt.application.font.pixelSize + 5 : Qt.application.font.pixelSize + 10
property real fontSizeLarger: MySettings.fontSize == "Small" ? Qt.application.font.pixelSize + 2 : MySettings.fontSize == "Medium" ? Qt.application.font.pixelSize + 7 : Qt.application.font.pixelSize + 12
}
// black and white
property color black: Qt.hsla(231/360, 0.15, 0.19)
property color white: Qt.hsla(0, 0, 1)
// dark mode black and white
property color darkwhite: Qt.hsla(0, 0, 0.85)
// gray
property color gray0: white
property color gray50: Qt.hsla(25/360, 0.05, 0.97)
property color gray100: Qt.hsla(25/360,0.05, 0.95)
property color gray200: Qt.hsla(25/360, 0.05, 0.89)
property color gray300: Qt.hsla(25/360, 0.05, 0.82)
property color gray400: Qt.hsla(25/360, 0.05, 0.71)
property color gray500: Qt.hsla(25/360, 0.05, 0.60)
property color gray600: Qt.hsla(25/360, 0.05, 0.51)
property color gray700: Qt.hsla(25/360, 0.05, 0.42)
property color gray800: Qt.hsla(25/360, 0.05, 0.35)
property color gray900: Qt.hsla(25/360, 0.05, 0.31)
property color gray950: Qt.hsla(25/360, 0.05, 0.15)
// darkmode
property color darkgray0: Qt.hsla(25/360, 0.05, 0.23)
property color darkgray50: Qt.hsla(25/360, 0.05, 0.21)
property color darkgray100: Qt.hsla(25/360, 0.05, 0.19)
property color darkgray200: Qt.hsla(25/360, 0.05, 0.17)
property color darkgray300: Qt.hsla(25/360, 0.05, 0.15)
property color darkgray400: Qt.hsla(25/360, 0.05, 0.13)
property color darkgray500: Qt.hsla(25/360, 0.05, 0.11)
property color darkgray600: Qt.hsla(25/360, 0.05, 0.09)
property color darkgray700: Qt.hsla(25/360, 0.05, 0.07)
property color darkgray800: Qt.hsla(25/360, 0.05, 0.05)
property color darkgray900: Qt.hsla(25/360, 0.05, 0.03)
property color darkgray950: Qt.hsla(25/360, 0.05, 0.01)
// green
property color green50: Qt.hsla(120/360, 0.18, 0.97)
property color green100: Qt.hsla(120/360, 0.21, 0.93)
property color green200: Qt.hsla(124/360, 0.21, 0.85)
property color green300: Qt.hsla(122/360, 0.20, 0.73)
property color green400: Qt.hsla(122/360, 0.19, 0.58)
property color green500: Qt.hsla(121/360, 0.19, 0.45)
property color green600: Qt.hsla(122/360, 0.20, 0.33)
property color green700: Qt.hsla(122/360, 0.19, 0.29)
property color green800: Qt.hsla(123/360, 0.17, 0.24)
property color green900: Qt.hsla(124/360, 0.17, 0.20)
property color green950: Qt.hsla(125/360, 0.22, 0.10)
// yellow
property color yellow50: Qt.hsla(47/360, 0.90, 0.96)
property color yellow100: Qt.hsla(46/360, 0.89, 0.89)
property color yellow200: Qt.hsla(45/360, 0.90, 0.77)
property color yellow300: Qt.hsla(44/360, 0.90, 0.66)
property color yellow400: Qt.hsla(41/360, 0.89, 0.56)
property color yellow500: Qt.hsla(36/360, 0.85, 0.50)
property color yellow600: Qt.hsla(30/360, 0.87, 0.44)
property color yellow700: Qt.hsla(24/360, 0.84, 0.37)
property color yellow800: Qt.hsla(21/360, 0.76, 0.31)
property color yellow900: Qt.hsla(20/360, 0.72, 0.26)
property color yellow950: Qt.hsla(19/360, 0.86, 0.14)
// red
property color red50: Qt.hsla(0, 0.71, 0.97)
property color red100: Qt.hsla(0, 0.87, 0.94)
property color red200: Qt.hsla(0, 0.89, 0.89)
property color red300: Qt.hsla(0, 0.85, 0.77)
property color red400: Qt.hsla(0, 0.83, 0.71)
property color red500: Qt.hsla(0, 0.76, 0.60)
property color red600: Qt.hsla(0, 0.65, 0.51)
property color red700: Qt.hsla(0, 0.67, 0.42)
property color red800: Qt.hsla(0, 0.63, 0.35)
property color red900: Qt.hsla(0, 0.56, 0.31)
property color red950: Qt.hsla(0, 0.67, 0.15)
// purple
property color purple400: Qt.hsla(279/360, 1.0, 0.73)
property color purple500: Qt.hsla(279/360, 1.0, 0.63)
property color purple600: Qt.hsla(279/360, 1.0, 0.53)
property color yellowAccent: MySettings.chatTheme === "Dark" ? yellow300 : yellow300;
property color orangeAccent: MySettings.chatTheme === "Dark" ? yellow500 : yellow500;
property color darkContrast: MySettings.chatTheme === "Dark" ? darkgray100 : gray100
property color lightContrast: MySettings.chatTheme === "Dark" ? darkgray0 : gray0
property color controlBorder: MySettings.chatTheme === "Dark" ? darkgray0 : gray300
property color controlBackground: MySettings.chatTheme === "Dark" ? darkgray100 : gray100
property color disabledControlBackground: MySettings.chatTheme === "Dark" ? darkgray200 : gray200
property color containerForeground: MySettings.chatTheme === "Dark" ? darkgray300 : gray300
property color containerBackground: MySettings.chatTheme === "Dark" ? darkgray200 : gray200
property color progressForeground: yellowAccent
property color progressBackground: MySettings.chatTheme === "Dark" ? green600 : green600
property color buttonBackground: MySettings.chatTheme === "Dark" ? green700 : green700
property color buttonBackgroundHovered: MySettings.chatTheme === "Dark" ? green500 : green500
property color buttonBorder: MySettings.chatTheme === "Dark" ? yellow200 : yellow200
property color sendButtonBackground: yellowAccent
property color sendButtonBackgroundHovered: MySettings.chatTheme === "Dark" ? darkwhite : black
property color conversationButtonBackground: MySettings.chatTheme === "Dark" ? darkgray100 : gray0
property color conversationButtonBackgroundHovered: MySettings.chatTheme === "Dark" ? darkgray0 : gray100
property color conversationButtonBorder: yellow200
property color iconBackgroundDark: MySettings.chatTheme === "Dark" ? green400 : green400
property color iconBackgroundLight: MySettings.chatTheme === "Dark" ? darkwhite : white
property color iconBackgroundHovered: yellowAccent;
property color slugBackground: MySettings.chatTheme === "Dark" ? darkgray300 : gray100
property color textColor: MySettings.chatTheme === "Dark" ? darkwhite : black
property color mutedTextColor: MySettings.chatTheme === "Dark" ? gray400 : gray600
property color oppositeTextColor: MySettings.chatTheme === "Dark" ? darkwhite : white
property color oppositeMutedTextColor: MySettings.chatTheme === "Dark" ? darkwhite : white
property color textAccent: yellowAccent
property color textErrorColor: MySettings.chatTheme === "Dark" ? red400 : red400
property color titleTextColor: MySettings.chatTheme === "Dark" ? green400 : green700
property color dialogBorder: MySettings.chatTheme === "Dark" ? darkgray0 : darkgray0
property color linkColor: MySettings.chatTheme === "Dark" ? yellow600 : yellow600
property color mainHeader: MySettings.chatTheme === "Dark" ? green600 : green600
property color mainComboBackground: MySettings.chatTheme === "Dark" ? green700 : green700
property color sendGlow: MySettings.chatTheme === "Dark" ? green950 : green300
property color userColor: MySettings.chatTheme === "Dark" ? green700 : green700
property color assistantColor: yellowAccent
property real fontSizeFixedSmall: 16
property real fontSizeSmall: fontSizeLarge - 4
property real fontSizeLarge: MySettings.fontSize === "Small" ?
Qt.application.font.pixelSize : MySettings.fontSize === "Medium" ?
Qt.application.font.pixelSize + 5 : Qt.application.font.pixelSize + 10
property real fontSizeLarger: MySettings.fontSize === "Small" ?
Qt.application.font.pixelSize + 2 : MySettings.fontSize === "Medium" ?
Qt.application.font.pixelSize + 7 : Qt.application.font.pixelSize + 12
property real fontSizeLargest: MySettings.fontSize === "Small" ?
Qt.application.font.pixelSize + 7 : MySettings.fontSize === "Medium" ?
Qt.application.font.pixelSize + 12 : Qt.application.font.pixelSize + 14
}

18
gpt4all-chat/qml/ThumbsDownDialog.qml
View File

@ -10,7 +10,6 @@ import llm
MyDialog { MyDialog {
id: thumbsDownDialog id: thumbsDownDialog
modal: true modal: true
opacity: 0.9
padding: 20 padding: 20
Theme { Theme {
@ -50,18 +49,9 @@ MyDialog {
ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
TextArea { MyTextArea {
id: thumbsDownNewResponse id: thumbsDownNewResponse
color: theme.textColor
padding: 20
wrapMode: Text.Wrap
font.pixelSize: theme.fontSizeLarge
placeholderText: qsTr("Please provide a better response...") placeholderText: qsTr("Please provide a better response...")
placeholderTextColor: theme.backgroundLightest
background: Rectangle {
color: theme.backgroundLighter
radius: 10
}
} }
} }
} }
@ -70,15 +60,13 @@ MyDialog {
padding: 20 padding: 20
alignment: Qt.AlignRight alignment: Qt.AlignRight
spacing: 10 spacing: 10
MyButton { MySettingsButton {
text: qsTr("Submit") text: qsTr("Submit")
font.pixelSize: theme.fontSizeLarge
Accessible.description: qsTr("Submits the user's response") Accessible.description: qsTr("Submits the user's response")
DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
} }
MyButton { MySettingsButton {
text: qsTr("Cancel") text: qsTr("Cancel")
font.pixelSize: theme.fontSizeLarge
Accessible.description: qsTr("Closes the response dialog") Accessible.description: qsTr("Closes the response dialog")
DialogButtonBox.buttonRole: DialogButtonBox.RejectRole DialogButtonBox.buttonRole: DialogButtonBox.RejectRole
} }