ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-24 06:36:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/nomic-ai/gpt4all-ui

Browse Source
This commit is contained in:
ParisNeo 2023-05-05 22:35:11 +02:00
commit d2f158876f
8 changed files with 99 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/dev/new_ui_dev.md
View File

@ -1,7 +1,39 @@
# GPT4ALL-UI Web interface VUE3 development log, todo's and more
## Installation for development
You must have [Node.js](https://nodejs.org/en) installed on your computer.
```
cd /web/
npm install
```
## Testing, running, debugging
After that to run development server locally and test the web page at http://localhost:5173/:
```
npm run dev
```
> Note
> To run the developmen environment you need to create copy of the `.env` file and name it either `.env.development` or if that dont work then `.env.dev`. Set `VITE_GPT4ALL_API_BASEURL = /api/ ` in the `.env.development`.
> Run your gpt backend by launching `webui.bat` or bash `webui.sh`.
## Building frontend - UI
```
npm run build
```
This will update `/dist/` folder with all the files. Also the build will show you if there are errors or not in your vue code.
> Note
> Make sure you test the built files too, because sometimes the builder dont catch all the errors, and if a component is not refernced it might not load in the built version, but it loads fine in development environment
# UI development log, todo's and more
The new UI is build using Node.js VUE3 + Vite. It uses tailwindcss, feathericons, openfonts and flowbite-vue components.
Here we keep track of things to implement and stuff we need to do.
## Todo's
- Add ability to select multiple discussions to export or delete [WIP]
@ -35,4 +67,3 @@ The new UI is build using Node.js VUE3 + Vite. It uses tailwindcss, feathericons
- Add modal to ask user if you sure about to delete [DONE but in different way]
- Fix up the discussion array to filter out the messages by type not by count. (conditionner and )[DONE]
- Add title of current discussion to page [DONE]

2
web/.env
View File

@ -1,4 +1,4 @@
VITE_GPT4ALL_API = http://localhost:9600 # http://localhost:9600
VITE_GPT4ALL_API_CHANGE_ORIGIN = 0 # FALSE
VITE_GPT4ALL_API_SECURE = 0 # FALSE
VITE_GPT4ALL_API_BASEURL = / # FALSE
VITE_GPT4ALL_API_BASEURL = /

65
web/Readme.md
View File

@ -1,65 +0,0 @@
# GPT4ALL-UI Web interface VUE3
## Dependencies for development
You mus have [Node.js](https://nodejs.org/en) installed on your computer.
```
git clone repo_URL
cd into-this-repo-dir
npm install
```
After that to run development server locally and test the web page at http://localhost:5173/:
```
npm run dev
```
To connect to GPT4ALL-UI API server you need to enter its URL in the `.env` or make a copy of `.env` file and name it `.env.local`. This .env.local is added to `.gitignore`.
All http requests made to GPT4ALL-UI api has to have /api/ prefix. This prefix gets rewritten in the vite.config.js file.
Make changes to your usecase in the `.env.local` file.
Once UI id done you can build static files for serving.
```
npm run build
```
This will create /dist/ folder with all the files. Also the build will show you if there are errors or not in your vue code.
> Make sure you test the static files too, because sometimes the builder dont catch all the errors, and if a component is not refernced it might not load in the built version, but it loads fine in development environment
### Overview of used dependencies and development
- Nodejs
- vue
- feather-icons
- axios
```
npm init vue@latest
```
```
cd gpt4all-ui-vue
npm install
npm run format
npm install axios dotenv
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install feather-icons --save
```
### Running dev environment and building commands
To lint: (not very used)
```
npm run lint
```
To run test:
```
npm run dev
```
To build static files
```
npm run build
```

2
web/dist/assets/index-76ef06fb.css → web/dist/assets/index-13dee4e0.css vendored
View File

File diff suppressed because one or more lines are too long

2
web/dist/assets/index-2f3efff7.js → web/dist/assets/index-c75a91fb.js vendored
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPT4All - WEBUI</title>
<script type="module" crossorigin src="/assets/index-2f3efff7.js"></script>
<link rel="stylesheet" href="/assets/index-76ef06fb.css">
<script type="module" crossorigin src="/assets/index-c75a91fb.js"></script>
<link rel="stylesheet" href="/assets/index-13dee4e0.css">
</head>
<body>
<div id="app"></div>

6
web/src/components/Discussion.vue
View File

@ -143,12 +143,6 @@ export default {
checkBoxValue(newval, oldval) {
this.checkBoxValue_local = newval
},
selected(newval, oldval) {
if (newval) {
const realTitle= this.title ? this.title === "untitled" ? "New discussion" : this.title : "New discussion"
document.title = 'GPT4ALL - WEBUI - '+ realTitle
}
}
}
}

65
web/src/views/DiscussionsView.vue
View File

@ -57,8 +57,8 @@
<div class="flex flex-row gap-3">
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 " title="Select All" type="button"
@click.stop="selectAllDiscussions">
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 " title="Select All"
type="button" @click.stop="selectAllDiscussions">
<i data-feather="list"></i>
</button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 rotate-90"
@ -76,9 +76,9 @@
<!-- DISCUSSION LIST -->
<div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
<Discussion v-for="(item, index) in list" :key="index" :id="item.id" :title="item.title"
:selected="currentDiscussion.id == item.id" :loading="item.loading"
:isCheckbox="isCheckbox" :checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)"
@delete="deleteDiscussion(item.id)" @editTitle="editTitle" @checked="checkUncheckDiscussion" />
:selected="currentDiscussion.id == item.id" :loading="item.loading" :isCheckbox="isCheckbox"
:checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)" @delete="deleteDiscussion(item.id)"
@editTitle="editTitle" @checked="checkUncheckDiscussion" />
<div v-if="list.length < 1"
class="gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
@ -148,12 +148,12 @@ export default {
try {
if (id) {
this.loading = true
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
const res = await axios.post('/load_discussion', {
id: id
})
this.loading = false
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
if (res) {
// Filter out the user and bot entries
this.discussionArr = res.data.filter((item) => item.type == 0)
@ -169,7 +169,7 @@ export default {
} catch (error) {
console.log(error)
this.loading = false
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
}
},
async new_discussion(title) {
@ -188,30 +188,30 @@ export default {
try {
if (id) {
this.loading = true
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
const res = await axios.post('/delete_discussion', {
id: id
})
this.loading = false
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
}
} catch (error) {
console.log(error)
this.loading = false
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
}
},
async edit_title(id, new_title) {
try {
if (id) {
this.loading = true
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
const res = await axios.post('/edit_title', {
id: id,
title: new_title
})
this.loading = false
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
if (res.status == 200) {
const index = this.list.findIndex((x) => x.id == id)
const discussionItem = this.list[index]
@ -222,7 +222,7 @@ export default {
} catch (error) {
console.log(error)
this.loading = false
this.setDiscussionLoading(id,this.loading)
this.setDiscussionLoading(id, this.loading)
}
},
filterDiscussions() {
@ -241,6 +241,8 @@ export default {
this.currentDiscussion = item
this.setPageTitle(item)
localStorage.setItem('selected_discussion', this.currentDiscussion.id)
await this.load_discussion(item.id)
@ -307,12 +309,12 @@ export default {
}
this.isGenerating = false
this.setDiscussionLoading(this.currentDiscussion.id,this.isGenerating)
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
},
sendMsg(msg) {
// Sends message to backend
this.isGenerating = true
this.setDiscussionLoading(this.currentDiscussion.id,this.isGenerating)
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
websocket.emit('generate_msg', { prompt: msg })
},
steamMessageContent(content) {
@ -354,7 +356,7 @@ export default {
if (id) {
const index = this.list.findIndex((x) => x.id == id)
const discussionItem = this.list[index]
if(discussionItem){
if (discussionItem) {
this.selectDiscussion(discussionItem)
}
}
@ -368,9 +370,10 @@ export default {
await this.delete_discussion(id)
if (this.currentDiscussion.id == id) {
this.currentDiscussion = {}
this.discussionArr=[]
this.discussionArr = []
this.setPageTitle()
}
this.list.splice(this.list.findIndex(item => item.id==id),1)
this.list.splice(this.list.findIndex(item => item.id == id), 1)
this.createDiscussionList(this.list)
//await this.list_discussions()
@ -423,15 +426,32 @@ export default {
}
},
setDiscussionLoading(id,loading){
setDiscussionLoading(id, loading) {
const index = this.list.findIndex((x) => x.id == id)
const discussionItem = this.list[index]
discussionItem.loading = loading
},
setPageTitle(item) {
// item is either title:String or {id:Number, title:String}
if (item) {
if (item.id) {
const realTitle = item.title ? item.title === "untitled" ? "New discussion" : item.title : "New discussion"
document.title = 'GPT4ALL - WEBUI - ' + realTitle
} else {
const title = item || "Welcome"
document.title = 'GPT4ALL - WEBUI - ' + title
}
} else {
const title = item || "Welcome"
document.title = 'GPT4ALL - WEBUI - ' + title
}
}
},
async created() {
// Constructor
this.setPageTitle()
await this.list_discussions()
this.loadLastUsedDiscussion()
@ -475,7 +495,8 @@ export default {
if (!newval) {
this.isSelectAll = false
}
}
},
}
}
</script>