提交 ce25e193 编写于 作者: D DebugIsFalse

feature: add featrue

上级 8d6cea05
const BASE_URL = 'http://localhost:3000'; const BASE_URL = 'https://gpu-pod656e861afe3d944d6b3ce77e-7862.node.inscode.run';
const useFetchRequest = (baseUrl) => { const useFetchRequest = (baseUrl) => {
baseUrl = baseUrl || BASE_URL; baseUrl = baseUrl || BASE_URL;
const config = { const config = {
headers: {} headers: {}
}; };
const loading = ref(false);
const fetchRequest = (url, fetchConfig) => { const fetchRequest = (url, fetchConfig) => {
url = `${BASE_URL}${url}`; url = `${BASE_URL}${url}`;
fetchConfig = fetchConfig || {}; fetchConfig = fetchConfig || {};
fetchConfig.method = (fetchConfig.method || 'get').toLocaleUpperCase(); fetchConfig.method = (fetchConfig.method || 'get').toLocaleUpperCase();
if (!fetchConfig['Content-Type']) {
fetchConfig['Content-Type'] = 'application/json';
}
fetchConfig = Object.assign(config, fetchConfig); fetchConfig = Object.assign(config, fetchConfig);
return $fetch(url, fetchConfig).then(async (response) => { return $fetch(url, fetchConfig);
console.log(`response:`, response)
return response;
}).finally(() => {
loading.value = false
})
} }
return { return {
loading,
fetchRequest fetchRequest
} }
} }
......
...@@ -24,10 +24,25 @@ ...@@ -24,10 +24,25 @@
</div> </div>
</template> </template>
<script setup> <script setup>
const { fetchRequest } = useFetchRequest()
const query = ref('') const query = ref('')
const selectedRepo = ref('https://github.com/keycloak/keycloak.git') const selectedRepo = ref('https://github.com/keycloak/keycloak.git')
const repos = ['keycloak', 'ViewUIPlus'] const repos = ['keycloak', 'ViewUIPlus']
const handleSearch = () => { const loading = ref(false);
navigateTo(`/search/1?query=${query.value}&repo=${selectedRepo.value}`); const handleSearch = async () => {
if (loading.value) return;
loading.value = true;
const result = await fetchRequest('/v1/chat/completion/create', {
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
if (result && result.data) {
navigateTo(`/search/${result.data.c_id}?query=${query.value}&repo=${selectedRepo.value}`);
nextTick(() => {
loading.value = false;
})
}
} }
</script> </script>
...@@ -133,9 +133,11 @@ ...@@ -133,9 +133,11 @@
<script setup> <script setup>
const toast = useToast() const toast = useToast()
const route = useRoute() const route = useRoute()
const { fetchRequest } = useFetchRequest()
const state = reactive({ const state = reactive({
query: route.query.query || '', query: route.query.query || '',
repo: route.query.repo || '' repo: route.query.repo || '',
id: route.params.id
}) })
const isEditTitle = ref(false) const isEditTitle = ref(false)
const titleRef = ref(null) const titleRef = ref(null)
...@@ -170,62 +172,62 @@ const stepColor = (step) => { ...@@ -170,62 +172,62 @@ const stepColor = (step) => {
const data = ref([]) const data = ref([])
data.value = [ // data.value = [
{ // {
step: 4, // step: 4,
question: 'Select组件怎样远程搜索', // question: 'Select组件怎样远程搜索',
article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:', // article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:',
source: [ // source: [
{ // {
repo: 'ViewDesign/ViewUIPlus', // repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue', // label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue' // link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
}, // },
{ // {
repo: 'ViewDesign/ViewUIPlus', // repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue', // label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue' // link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
}, // },
{ // {
repo: 'ViewDesign/ViewUIPlus', // repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue', // label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue' // link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
}, // },
{ // {
repo: 'ViewDesign/ViewUIPlus', // repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue', // label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue' // link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
} // }
] // ]
}, // },
{ // {
step: 1, // step: 1,
question: 'Select组件怎样远程搜索', // question: 'Select组件怎样远程搜索',
article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:', // article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:',
source: [ // source: [
{ // {
repo: 'ViewDesign/ViewUIPlus', // repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue', // label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue' // link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
}, // },
{ // {
repo: 'ViewDesign/ViewUIPlus', // repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue', // label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue' // link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
}, // },
{ // {
repo: 'ViewDesign/ViewUIPlus', // repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue', // label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue' // link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
}, // },
{ // {
repo: 'ViewDesign/ViewUIPlus', // repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue', // label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue' // link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
} // }
] // ]
} // }
] // ]
const recommendQuestions = [ const recommendQuestions = [
{ {
...@@ -244,4 +246,64 @@ const handleContinueAsk = (question) => { ...@@ -244,4 +246,64 @@ const handleContinueAsk = (question) => {
if (asking.value) return; if (asking.value) return;
asking.value = true; asking.value = true;
} }
// 处理generate
let generateFetchObj = null; // 用户取消操作方法
const marked = 'data:';
const handleFormFetchData = (fetchData) => {
if (fetchData === 'data:[DONE]') return;
fetchData = fetchData.slice(marked.length , fetchData.length);
let message = {};
try {
message = JSON.parse(fetchData);
} catch(error) {
console.log(error)
}
if (Object.keys(message).length === 0) return;
console.log(`message:`, message)
if (message.data.meta.type === 'answer') {
// step: 4,
// question: 'Select组件怎样远程搜索',
// article:
const index = data.value.length === 0 ? 0 : data.value.length - 1;
data.value[index] = {
step: 4,
question: state.query,
article: message.data.choices[0].message.content
}
}
}
const getHistoryMessage = () => {
const messages = []
data.value.forEach(item => {
messages.push(...[
{ role: 'user', content: item.question },
{ role: 'assistant', content: item.article }
])
})
return messages;
}
const generateFetchData = () => {
const { repo, id } = state;
const messages = getHistoryMessage();
messages.push({ role: 'user', content: state.query });
generateFetchObj = fetchRequest('/v1/chat/completions', {
method: 'post',
headers: {
'Accept': '*/*'
},
body: {
repo_path: repo,
c_id: id,
stream: true,
messages
}
}).then((response) => {
handleFormFetchData(response);
}).finally(() => {
asking.value = false;
})
}
onMounted(() => {
generateFetchData();
})
</script> </script>
\ No newline at end of file
...@@ -3,7 +3,7 @@ import { createRouter, defineEventHandler, useBase } from 'h3' ...@@ -3,7 +3,7 @@ import { createRouter, defineEventHandler, useBase } from 'h3'
const router = createRouter() const router = createRouter()
router.get('/test', defineEventHandler(() => { router.get('/test', defineEventHandler(() => {
return { data: 'Hello World' } return 'data:{"message":"success","data":{"id":"c_20240516095719_bfaJkBJyg4KTwL8g","object":"chat.completion","created":1715824958,"model":"chat_qwen110b","choices":[{"index":0,"message":{"role":"assistant","content":"Hello! I\'m here to help you with any questions or tasks related to the Byzer-LLM project or its usage. Whether you need assistance with deployment, querying models, understanding the integration process, or exploring its features, feel free to ask. For instance, if you\'re looking to set up a model like `sparkdesk_chat`, run a simple inference, validate the model, or even understand how to use Python scripts for interacting with Byzer-LLM, just let me know your specific inquiry!"},"finish_reason":"stop"}],"usage":{"prompt_tokens":6653,"completion_tokens":104,"total_tokens":6757},"meta":{"type":"answer"}}}';
})) }))
export default useBase('/api/mock', router.handler) export default useBase('/api/mock', router.handler)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册