ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-02-20 09:16:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Enhanced playground and messages

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-12-30 17:09:30 +01:00
parent 6b537bcb1e
commit b8de88153f
11 changed files with 368 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app.py
View File

@ -618,6 +618,44 @@ try:
return json.dumps(output_json)
return spawn_process(code)
def execute_latex(self, code, discussion_id, message_id):
def spawn_process(code):
"""Executes Python code and returns the output as JSON."""
# Start the timer.
start_time = time.time()
# Create a temporary file.
root_folder = self.lollms_paths.personal_outputs_path/"discussions"/f"d_{discussion_id}"
root_folder.mkdir(parents=True,exist_ok=True)
tmp_file = root_folder/f"latex_file_{message_id}.tex"
with open(tmp_file,"w",encoding="utf8") as f:
f.write(code)
try:
# Determine the pdflatex command based on the provided or default path
if self.config.pdf_latex_path:
pdflatex_command = self.config.pdf_latex_path
else:
pdflatex_command = 'pdflatex'
# Run the pdflatex command with the file path
subprocess.run([pdflatex_command, tmp_file], check=True)
# If the compilation is successful, you will get a PDF file
pdf_file = pdflatex_command.with_suffix('.pdf')
print(f"PDF file generated: {pdf_file}")
except subprocess.CalledProcessError as e:
print(f"Error occurred while compiling LaTeX: {e}")
# Stop the timer.
execution_time = time.time() - start_time
# The child process was successful.
output_json = {"output": f"Pdf file generated at: {pdf_file}", "execution_time": execution_time}
return json.dumps(output_json)
return spawn_process(code)
def execute_bash(self, code, discussion_id, message_id):
def spawn_process(code):
"""Executes Python code and returns the output as JSON."""
@ -676,6 +714,8 @@ try:
if language=="python":
return self.execute_python(code, discussion_id, message_id)
elif language=="latex":
return self.execute_latex(code, discussion_id, message_id)
elif language in ["bash","shell","cmd","powershell"]:
return self.execute_bash(code, discussion_id, message_id)
return {"output": "Unsupported language", "execution_time": 0}

6
configs/config.yaml
View File

@ -1,5 +1,5 @@
# =================== Lord Of Large Language Models Configuration file ===========================
version: 35
version: 36
binding_name: null
model_name: null
@ -81,3 +81,7 @@ data_vectorization_nb_chunks: 2 # number of chunks to use
data_vectorization_build_keys_words: false # If true, when querrying the database, we use keywords generated from the user prompt instead of the prompt itself.
data_vectorization_force_first_chunk: false # If true, the first chunk of the document will systematically be used
data_vectorization_make_persistance: false # If true, the data will be persistant webween runs
# Helpers
pdf_latex_path: null

2
lollms_core

@ -1 +1 @@
Subproject commit 79a9c0296f27b132109b697e94f198ba4c58f18e
Subproject commit a2cf0dbf501cd5ff2a381d5aea0934e91666424a

BIN
web/dist/assets/LaTeX_block-06b165c0.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

411
web/dist/assets/index-aa5c01f4.js → web/dist/assets/index-c32bc922.js vendored
View File

File diff suppressed because one or more lines are too long

2
web/dist/assets/index-7d925527.css → web/dist/assets/index-cefe48d9.css 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>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-aa5c01f4.js"></script>
<link rel="stylesheet" href="/assets/index-7d925527.css">
<script type="module" crossorigin src="/assets/index-c32bc922.js"></script>
<link rel="stylesheet" href="/assets/index-cefe48d9.css">
</head>
<body>
<div id="app"></div>

2
web/src/components/CodeBlock.vue
View File

@ -7,7 +7,7 @@
class="px-2 py-1 ml-2 text-left p-2 text-sm font-medium rounded-lg hover:bg-primary dark:hover:bg-primary text-white text-xs transition-colors duration-200">
<i data-feather="copy"></i>
</button>
<button v-if="['python', 'sh', 'shell', 'bash', 'cmd', 'powershell'].includes(language)" ref="btn_code_exec" @click="executeCode" title="execute"
<button v-if="['python', 'sh', 'shell', 'bash', 'cmd', 'powershell', 'latex'].includes(language)" ref="btn_code_exec" @click="executeCode" title="execute"
class="px-2 py-1 ml-2 text-left p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary dark:hover:bg-primary text-white text-xs transition-colors duration-200">
<i data-feather="play-circle"></i>
</button>

49
web/src/components/Message.vue
View File

@ -68,44 +68,52 @@
</button>
</div>
<div v-if="!editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
<div v-if="!editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Edit message" @click.stop="editMsgMode = true">
<i data-feather="edit"></i>
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add python block" @click.stop="addBlock('python')">
<img :src="python_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add javascript block" @click.stop="addBlock('javascript')">
<img :src="javascript_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add c++ block" @click.stop="addBlock('c++')">
<img :src="cpp_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add html block" @click.stop="addBlock('html')">
<img :src="html5_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add LaTex block" @click.stop="addBlock('latex')">
<img :src="LaTeX_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add bash block" @click.stop="addBlock('bash')">
<img :src="bash_block" width="25" height="25">
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Copy message to clipboard" @click.stop="copyContentToClipboard()">
<i data-feather="copy"></i>
</div>
<div v-if="!editMsgMode && message.sender!=this.$store.state.mountedPers.name" class="text-lg text-red-500 hover:text-secondary duration-75 active:scale-90 p-2"
<div v-if="!editMsgMode && message.sender!=this.$store.state.mountedPers.name" class="text-lg text-red-500 hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Resend message with full context"
@click.stop="resendMessage('full_context')"
:class="{ 'text-5xl': editMsgMode }">
<i data-feather="send"></i>
</div>
<div v-if="!editMsgMode && message.sender!=this.$store.state.mountedPers.name" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
<div v-if="!editMsgMode && message.sender!=this.$store.state.mountedPers.name" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Resend message without the full context"
@click.stop="resendMessage('simple_question')"
:class="{ 'text-5xl': editMsgMode }">
<i data-feather="send"></i>
</div>
<div v-if="!editMsgMode && message.sender==this.$store.state.mountedPers.name" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
<div v-if="!editMsgMode && message.sender==this.$store.state.mountedPers.name" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Resend message"
@click.stop="continueMessage()"
>
@ -113,37 +121,37 @@
</div>
<!-- DELETE CONFIRMATION -->
<div v-if="deleteMsgMode" class="flex items-center duration-75">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2"
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2 cursor-pointer"
title="Cancel removal" type="button" @click.stop="deleteMsgMode = false">
<i data-feather="x"></i>
</button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2"
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Confirm removal" type="button" @click.stop="deleteMsg()">
<i data-feather="check"></i>
</button>
</div>
<div v-if="!editMsgMode && !deleteMsgMode" class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2"
<div v-if="!editMsgMode && !deleteMsgMode" class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2 cursor-pointer"
title="Remove message" @click="deleteMsgMode = true">
<i data-feather="trash"></i>
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Upvote"
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer" title="Upvote"
@click.stop="rankUp()">
<i data-feather="thumbs-up"></i>
</div>
<div class="flex flex-row items-center">
<div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2" title="Downvote"
<div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2 cursor-pointer" title="Downvote"
@click.stop="rankDown()">
<i data-feather="thumbs-down"></i>
</div>
<div v-if="message.rank != 0"
class="rounded-full px-2 text-sm flex items-center justify-center font-bold"
class="rounded-full px-2 text-sm flex items-center justify-center font-bold cursor-pointer"
:class="message.rank > 0 ? 'bg-secondary' : 'bg-red-600'" title="Rank">{{
message.rank }}
</div>
</div>
<div class="flex flex-row items-center">
<div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2"
<div class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2 cursor-pointer"
title="speak"
@click.stop="speak()"
:class="{ 'text-red-500': isTalking }">
@ -151,13 +159,13 @@
</div>
</div>
<div v-if="this.$store.state.config.enable_voice_service" class="flex flex-row items-center">
<div v-if="!isSynthesizingVoice" class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2"
<div v-if="!isSynthesizingVoice" class="text-lg hover:text-red-600 duration-75 active:scale-90 p-2 cursor-pointer"
title="read"
@click.stop="read()"
>
<i data-feather="voicemail"></i>
</div>
<svg v-else aria-hidden="true" class="w-6 h-6 animate-spin fill-secondary" viewBox="0 0 100 101"
<svg v-else aria-hidden="true" class="w-6 h-6 animate-spin fill-secondary" viewBox="0 0 100 101 cursor-pointer" title="Generating voice, please stand by ..."
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
@ -257,12 +265,12 @@ import RenderHTMLJS from './RenderHTMLJS.vue';
import JsonViewer from "./JsonViewer.vue";
import Step from './Step.vue';
import axios from 'axios';
import python_block from '@/assets/python_block.png';
import javascript_block from '@/assets/javascript_block.svg';
import cpp_block from '@/assets/cpp_block.png';
import html5_block from '@/assets/html5_block.png';
import LaTeX_block from '@/assets/LaTeX_block.png';
import bash_block from '@/assets/bash_block.png';
export default {
@ -290,6 +298,7 @@ export default {
isSynthesizingVoice:false,
cpp_block:cpp_block,
html5_block:html5_block,
LaTeX_block:LaTeX_block,
javascript_block:javascript_block,
python_block:python_block,
bash_block:bash_block,

62
web/src/views/PlayGroundView.vue
View File

@ -57,6 +57,37 @@
</div>
<div class="flex-grow m-2 p-2 border border-blue-300 rounded-md border-2 border-blue-300 m-2 p-4" :class="{ 'border-red-500': generating }">
<div v-if="tab_id === 'source'">
<div class="flex flex-row justify-end mx-2">
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add python block" @click.stop="addBlock('python')">
<img :src="python_block" width="25" height="25">
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add javascript block" @click.stop="addBlock('javascript')">
<img :src="javascript_block" width="25" height="25">
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add c++ block" @click.stop="addBlock('c++')">
<img :src="cpp_block" width="25" height="25">
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add html block" @click.stop="addBlock('html')">
<img :src="html5_block" width="25" height="25">
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add LaTex block" @click.stop="addBlock('latex')">
<img :src="LaTeX_block" width="25" height="25">
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add bash block" @click.stop="addBlock('bash')">
<img :src="bash_block" width="25" height="25">
</div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Copy message to clipboard" @click.stop="copyContentToClipboard()">
<i data-feather="copy"></i>
</div>
</div>
<textarea ref="mdTextarea" @keydown.tab.prevent="insertTab"
class="block min-h-500 p-2.5 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 overflow-y-scroll flex flex-col shadow-lg p-10 pt-0 overflow-y-scroll dark:bg-bg-dark scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
:rows="4"
@ -177,6 +208,14 @@ import Card from "@/components/Card.vue"
import { nextTick, TransitionGroup } from 'vue'
const bUrl = import.meta.env.VITE_LOLLMS_API_BASEURL
import python_block from '@/assets/python_block.png';
import javascript_block from '@/assets/javascript_block.svg';
import cpp_block from '@/assets/cpp_block.png';
import html5_block from '@/assets/html5_block.png';
import LaTeX_block from '@/assets/LaTeX_block.png';
import bash_block from '@/assets/bash_block.png';
async function showInputPanel(name, default_value="", options=[]) {
return new Promise((resolve, reject) => {
const panel = document.createElement("div");
@ -324,6 +363,14 @@ export default {
name: 'PlayGroundView',
data() {
return {
cpp_block:cpp_block,
html5_block:html5_block,
LaTeX_block:LaTeX_block,
javascript_block:javascript_block,
python_block:python_block,
bash_block:bash_block,
isSynthesizingVoice:false,
audio_url:null,
mdRenderHeight:300,
@ -461,6 +508,21 @@ export default {
},
},
methods:{
addBlock(bloc_name){
console.log("Adding bloc :",bloc_name)
let p =this.$refs.mdTextarea.selectionStart
if(p==0 || this.text[p-1]=="\n"){
this.text = this.text.slice(0, p) + "```"+bloc_name+"\n\n```\n" + this.text.slice(p)
p = p+4+bloc_name.length
}
else{
this.text = this.text.slice(0, p) + "\n```"+bloc_name+"\n\n```\n" + this.text.slice(p)
p = p+3+bloc_name.length
}
this.$refs.mdTextarea.focus();
this.$refs.mdTextarea.selectionStart = this.$refs.mdTextarea.selectionEnd = p;
},
insertTab(event) {
const textarea = event.target;
const start = textarea.selectionStart;

21
web/src/views/SettingsView.vue
View File

@ -689,6 +689,27 @@
</table>
</Card>
<Card title="Latex" :is_subcard="true" class="pb-2 m-2">
<table class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<tr>
<td style="min-width: 200px;">
<label for="pdf_latex_path" class="text-sm font-bold" style="margin-right: 1rem;">PDF LaTeX path:</label>
</td>
<td>
<div class="flex flex-row">
<input
type="text"
id="pdf_latex_path"
required
v-model="configFile.pdf_latex_path"
@change="settingsChanged=true"
class="mt-1 px-2 py-1 border border-gray-300 rounded dark:bg-gray-600"
>
</div>
</td>
</tr>
</table>
</Card>
<Card title="XTTS service" :is_subcard="true" class="pb-2 m-2">
<table class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">