Initial commit

ktransformers/website/src/api/assistant.ts

+import apiClient from './api-client';
+import { IAssistant,IDeleteResult, IAssistantWithStatus } from '../utils/types';
+function filterAndConvert(
+    assistantsWithStatus: IAssistantWithStatus[],
+    statusCondition: string
+  ): IAssistant[] {
+    return assistantsWithStatus
+      .filter((assistant) => assistant.build_status.status === statusCondition)
+      .map(({ build_status, ...rest }) => rest);
+  }
+
+interface IAssistantData {
+    model: string;
+    prefix_system_prompt?: string;
+    suffix_system_prompt?: string;
+    name?: string;
+    description?: string;
+    tools?: any[];
+    tool_resources?: object;
+    metadata?:{[key:string]:any}
+    top_p?: number;
+    temperature?: number;
+    response_format?: string;
+    instructions?: string;
+}
+
+export const createAssistant = async (data: IAssistantData): Promise<IAssistant> => {
+    const assistant_data: {
+        model: string;
+        instructions?: string;
+        name?: string;
+        description?: string;
+        tools?: any[];
+        tool_resources?: object;
+        metadata?:{[key:string]:any}
+        top_p?: number;
+        temperature?: number;
+        response_format?: string;
+    } = {
+        model: data.model
+    };
+
+    if (data.prefix_system_prompt) {
+        assistant_data.instructions = data.prefix_system_prompt;
+    }
+    if (data.suffix_system_prompt) {
+        assistant_data.instructions = data.suffix_system_prompt;
+    }
+    if (data.name) {
+        assistant_data.name = data.name;
+    }
+    if (data.description) {
+        assistant_data.description = data.description;
+    }
+    if (data.tools) {
+        assistant_data.tools = data.tools;
+    }
+    if (data.tool_resources) {
+        assistant_data.tool_resources = data.tool_resources;
+    }
+    if (data.metadata) {
+        assistant_data.metadata = data.metadata
+    }
+    if (typeof data.top_p !== 'undefined') {
+        assistant_data.top_p = data.top_p;
+    }
+    if (typeof data.temperature !== 'undefined') {
+        assistant_data.temperature = data.temperature;
+    }
+    if (data.response_format) {
+        assistant_data.response_format = data.response_format;
+    }
+    if (data.instructions) {
+        assistant_data.instructions = data.instructions;
+    }
+    console.log(assistant_data)
+    const response = await apiClient.post<IAssistant>(
+        '/assistants/',
+        assistant_data
+    );
+    console.log("response", response)
+    return response.data;
+};
+
+
+export const listAssistants = async (
+    limit?: number,
+    order?: string,
+    after?: string,
+    before?: string,
+    run_id?: string,
+): Promise<IAssistant[]> => {
+    const params: {
+        limit?: number,
+        order?: string,
+        after?: string,
+        before?: string,
+        run_id?: string
+    } = {};
+
+    if (typeof limit !== 'undefined') {
+        params.limit = limit;
+    }
+    if (typeof order !== 'undefined') {
+        params.order = order;
+    }
+    if (typeof after !== 'undefined') {
+        params.after = after;
+    }
+    if (typeof before !== 'undefined') {
+        params.before = before;
+    }
+    if (typeof run_id !== 'undefined') {
+        params.run_id = run_id;
+    }
+    const response = await apiClient.get<IAssistantWithStatus[]>('/assistants/status', {
+        params
+    });
+    let tmp = response.data
+    let result = [] as IAssistant[]
+    const filteredAssistants = filterAndConvert(tmp, 'completed');
+    return filteredAssistants
+};
+
+export const getAssistant = async (
+    assistant_id: string
+): Promise<IAssistant> => {
+    const response = await apiClient.get<IAssistant>(`/assistants/${assistant_id}`);
+    return response.data;
+}
+
+export const deleteAssistant = async (
+    assistant_id: string
+): Promise<IDeleteResult> => {
+    const response = await apiClient.delete<IDeleteResult>(`/assistants/${assistant_id}`);
+    return response.data;
+}
+
+export const getRelatedThreadId = async (
+    assistant_id: string
+): Promise<string[]> => {
+    const response = await apiClient.get<string[]>(`/assistants/${assistant_id}/related_thread`);
+    return response.data;
+}
+
+export const listAssistantsWithStatus = async (
+    limit?: number,
+    order?: string,
+    after?: string,
+    before?: string,
+    run_id?: string,
+): Promise<IAssistantWithStatus[]> => {
+    const params: {
+        limit?: number,
+        order?: string,
+        after?: string,
+        before?: string,
+        run_id?: string
+    } = {};
+
+    if (typeof limit !== 'undefined') {
+        params.limit = limit;
+    }
+    if (typeof order !== 'undefined') {
+        params.order = order;
+    }
+    if (typeof after !== 'undefined') {
+        params.after = after;
+    }
+    if (typeof before !== 'undefined') {
+        params.before = before;
+    }
+    if (typeof run_id !== 'undefined') {
+        params.run_id = run_id;
+    }
+    console.log(params)
+    const response = await apiClient.get<IAssistantWithStatus[]>('/assistants/status', {
+        params
+    });
+
+    return response.data;
+};
+
+

ktransformers/website/src/api/message.ts

+import apiClient from './api-client';
+import { IMessage,IDeleteResult } from '../utils/types';
+
+export const createMessage = async (
+    thread_id: string,
+    content: string,
+    role?: string,
+    attachments?: any[],
+    metadata?:{[key:string]:any}
+): Promise<IMessage> => {
+    const message_data: {
+        content: string;
+        role?: string;
+        attachments?: any[];
+        metadata?:{[key:string]:any}
+    } = {
+        content,
+    };
+
+    if (metadata) {
+        message_data.metadata = metadata;
+    }
+    if (role) {
+        message_data.role = role;
+    }
+    if (attachments) {
+        message_data.attachments = attachments;
+    }
+    const response = await apiClient.post<IMessage>(`/threads/${thread_id}/messages`, message_data);
+    return response.data;
+};
+
+
+export const listMessages = async (
+    thread_id: string,
+    limit?: number,
+    order?: string,
+    after?: string,
+    before?: string,
+    run_id?: string,
+): Promise<IMessage[]> => {
+    const params: {
+        limit?: number,
+        order?: string,
+        after?: string,
+        before?: string,
+        run_id?: string
+    } = {};
+
+    if (typeof limit !== 'undefined') {
+        params.limit = limit;
+    }
+    if (typeof order !== 'undefined') {
+        params.order = order;
+    }
+    if (typeof after !== 'undefined') {
+        params.after = after;
+    }
+    if (typeof before !== 'undefined') {
+        params.before = before;
+    }
+    if (typeof run_id !== 'undefined') {
+        params.run_id = run_id;
+    }
+
+    const response = await apiClient.get<IMessage[]>(`/threads/${thread_id}/messages`, {
+        params
+    });
+
+    return response.data;
+};
+export const deleteMessage = async(thread_id:string, message_id:string): Promise<IDeleteResult> => {
+    const response = await apiClient.delete<IDeleteResult>(`/threads/${thread_id}/messages/${message_id}`);
+    return response.data;
+}

ktransformers/website/src/api/run.ts

+import apiClient from './api-client';
+import { IRun } from '../utils/types';
+import {baseURL} from '@/conf/config';
+interface IRunData {
+    assistant_id: string;
+    model?: string;
+    instructions?: string;
+    additional_instructions?: string;
+    additional_messages?: any[];
+    tools?: any[];
+    metadata?: { [key: string]: any }
+    temperature?: number;
+    top_p?: number;
+    stream?: boolean;
+    max_prompt_tokens?: number;
+    max_completion_tokens?: number;
+    truncation_strategy?: object;
+    tool_choice?: string;
+    response_format?: string | object;
+}
+
+
+export async function* createRun(
+    data: IRunData,
+    thread_id: string
+): AsyncGenerator<string> {
+    const run_data = {
+        ...data, 
+        assistant_id: data.assistant_id, 
+    };
+
+    const response = await fetch(`${baseURL}/threads/${thread_id}/runs`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(run_data),
+    });
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    if (!response.body) {
+        throw new Error('Response body is missing');
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    try {
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) return;
+            buffer += decoder.decode(value, { stream: true });
+
+            let eventIndex = buffer.indexOf("\n\n");
+            while (eventIndex !== -1) {
+                const event = buffer.slice(0, eventIndex);
+                buffer = buffer.slice(eventIndex + 2);
+                if (event.startsWith("event: thread.run.created")) {
+                    const dataIndex = event.indexOf("data: ");
+                    if (dataIndex !== -1) {
+                        const datads = event.slice(39, 75)
+                        yield datads;
+                    }
+                } else if (event.startsWith("event: thread.message.delta")) {
+                    const dataIndex = event.indexOf("data: ");
+                    if (dataIndex !== -1) {
+                        const data = JSON.parse(event.slice(dataIndex + 6));
+                        yield data.delta.content[0].text.value || '';
+                    }
+                } else if (event.startsWith("event: done")) {
+                    return;
+                }
+
+                eventIndex = buffer.indexOf("\n\n");
+            }
+        }
+    } catch (e) {
+
+        console.error('An error occurred while reading the response stream:', e);
+        // throw e; 
+        return e
+    }
+}
+// 定义取消运行的函数
+export async function cancelRun(threadId: string, runId: string){
+    const run_data = {
+        thread_id:threadId,
+        run_id:runId,
+    };
+    try {
+        const response = await fetch(`${baseURL}/threads/${threadId}/runs/${runId}/cancel`, {
+            method: 'POST',
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        return response;
+    } catch (error) {
+        console.error('An error occurred while cancelling the run:', error);
+        throw error;
+    }
+}
\ No newline at end of file

ktransformers/website/src/api/thread.ts

+import apiClient from './api-client';
+import { IThread, IMessage, IThreadAndMessageAndAssistant, IDeleteResult } from '../utils/types';
+export const createThread = async (
+    message?: IMessage,
+    tool_resources?: object,
+    metadata?: { [key: string]: any }
+): Promise<IThread> => {
+    const thread_data: { message?: object, metadata?: { [key: string]: any } } = {};
+    if (message) {
+        thread_data.message = message;
+    }
+    if (metadata) {
+        thread_data.metadata = metadata;
+    }
+    const response = await apiClient.post<IThread>(
+        '/threads',
+        thread_data);
+    return response.data;
+};
+
+export const listThreads = async (
+    limit?: number,
+    order?: string,
+): Promise<IThreadAndMessageAndAssistant[]> => {
+    const params: {
+        limit?: number,
+        order?: string,
+    } = { limit, order };
+    const response = await apiClient.get<IThreadAndMessageAndAssistant[]>('/threads', {
+        params
+    });
+
+    return response.data;
+};
+
+export const deleteThread = async (
+    thread_id: string
+): Promise<IDeleteResult> => {
+    const response = await apiClient.delete<IDeleteResult>(`/threads/${thread_id}`);
+    return response.data;
+}
+
+export const getThread = async (
+    thread_id: string
+): Promise<IThread> => {
+    const response = await apiClient.get<IThread>(`/threads/${thread_id}`);
+    return response.data;
+}
\ No newline at end of file

ktransformers/website/src/assets/css/mixins.styl

+
+/*Define color variables*/
+$bg_gray_light_normal = #F9F9F9
+$bg_gray_light_hover = #E8E8E8
+$bg_gray_light_active = #E8E8E8
+
+$border_gray_light_normal = rgba(0, 0, 0, .15)
+$border_gray_light_hover = #8080FF
+
+$gray_20 = #333333
+$gray_40 = #585858
+$gray_50 = #7F7F7F
+$gray_60 = #9F9F9F
+$gray_70 = #BFBFBF
+$gray_80 = #DFDFDF
+$gray_85 = #F2F2F2
+$gray_90 = #F7F7F7
+
+$gray = #53525B
+$gray_dark = #42414a
+$gray_hover = #121212
+$gray_action = #6C757D
+
+$primary = #409eff
+$primary_hover = #428bca
+$primary_middle = #9DDDF9
+$primary_light = #D4F0FC
+
+$cyan = #66CCCC
+$cyan_hover = #46C2C2
+
+
+/*Define common modules*/
+$input-duration = .25s
+input-border()
+  -webkit-transition: border-color ease-in-out $input-duration,-webkit-box-shadow ease-in-out $input-duration
+  -o-transition: border-color ease-in-out $input-duration,box-shadow ease-in-out $input-duration
+  transition: border-color ease-in-out $input-duration,box-shadow ease-in-out $input-duration
+input-focus()
+  border-color: #66afe9
+  outline: 0
+  z-index: 100
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
+
+
+/*Define common class*/
+.flex-column
+  display: -webkit-box
+  display: -webkit-flex
+  display: flex
+  box-sizing: border-box
+  -webkit-box-orient: vertical
+  -webkit-box-direction: normal
+  -webkit-flex-direction: column
+  flex-direction: column
+  height: 100%
+
+.flex-row
+  position: relative
+  display: -webkit-box
+  display: -ms-flexbox
+  display: flex
+  box-sizing: border-box
+  -webkit-box-align: center
+  -ms-flex-align: center
+  align-items: center
+
+.flex-unit
+  -webkit-box-flex: 1
+  -ms-flex: 1
+  flex: 1
+  // overflow: hidden
+
+.clearfix
+  &:after
+    clear: both
+    content: "\20"
+    display: block
+    height: 0
+    visibility: hidden
+
+a,a:hover
+  text-decoration:none
+
+button:focus
+  outline: none
+
+.btn
+  display: inline-block
+  margin-bottom: 0
+  padding:0px 15px
+  font-size: 14px
+  height: 34px
+  line-height: 32px
+  float: left /*去掉inline-block之间的空格*/
+  font-weight: normal
+  text-align: center
+  white-space: nowrap
+  vertical-align: middle
+  cursor: pointer
+  background-image: none
+  border-radius: 3px
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  -o-user-select: none
+  user-select: none
+  &:hover
+    .dropdown-list
+      display: block
+  i
+    font-size: 16px
+  .text
+    float: right
+    margin-left: 3px
+
+.btn-gray
+  color: $gray_action
+  background-color: #FFFFFF
+  border: 1px solid $gray_action
+  &:not(.is-disabled):hover
+    color: #FFFFFF
+    background-color: $gray_action
+    border: 1px solid $gray_action
+
+.btn-primary
+  color: #FFFFFF
+  background-color: $primary
+  border: 1px solid $primary
+  &:not(.is-disabled):hover
+    color: #FFFFFF
+    background-color: $primary_hover
+    border: 1px solid $primary_hover
+
+.chat-box
+  position: relative
+  .chat-input
+    border: 1px solid $border_gray_light_normal
+    height: 48px
+    line-height: 48px
+    font-size: 16px
+    outline: 0
+    box-sizing: border-box
+    padding:0 30px0 20px
+    color: #7F7F7F
+    width: 800px
+    border-radius: 12px
+    position: relative
+    &:focus
+      input-focus()
+  i
+    position: absolute
+    font-size: 26px
+    right: 13px
+    bottom:0px
+    color: $border_gray_light_normal
+    z-index: 100
+    cursor: pointer
+    &:hover
+      color: $border_gray_light_hover

ktransformers/website/src/assets/iconfont/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing:0;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

ktransformers/website/src/assets/iconfont/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4550268" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8b0;</span>
+                <div class="name">复制</div>
+                <div class="code-name">&amp;#xe8b0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe85e;</span>
+                <div class="name">箭头下</div>
+                <div class="code-name">&amp;#xe85e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe651;</span>
+                <div class="name">进度</div>
+                <div class="code-name">&amp;#xe651;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">环形进度条</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe779;</span>
+                <div class="name">向左1</div>
+                <div class="code-name">&amp;#xe779;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">点</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7dd;</span>
+                <div class="name">编辑</div>
+                <div class="code-name">&amp;#xe7dd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">删除</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">上传</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe621;</span>
+                <div class="name">探索-选中</div>
+                <div class="code-name">&amp;#xe621;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe657;</span>
+                <div class="name">ellipsis</div>
+                <div class="code-name">&amp;#xe657;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">发送</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62d;</span>
+                <div class="name">列表</div>
+                <div class="code-name">&amp;#xe62d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">列表</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6bd;</span>
+                <div class="name">重试</div>
+                <div class="code-name">&amp;#xe6bd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe826;</span>
+                <div class="name">Fork 记录</div>
+                <div class="code-name">&amp;#xe826;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1717950820214') format('woff2'),
+       url('iconfont.woff?t=1717950820214') format('woff'),
+       url('iconfont.ttf?t=1717950820214') format('truetype'),
+       url('iconfont.svg?t=1717950820214#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-copy"></span>
+            <div class="name">
+              复制
+            </div>
+            <div class="code-name">.icon-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-arrow-down"></span>
+            <div class="name">
+              箭头下
+            </div>
+            <div class="code-name">.icon-arrow-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-usage-progress"></span>
+            <div class="name">
+              进度
+            </div>
+            <div class="code-name">.icon-usage-progress
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gen-progress"></span>
+            <div class="name">
+              环形进度条
+            </div>
+            <div class="code-name">.icon-gen-progress
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-back"></span>
+            <div class="name">
+              向左1
+            </div>
+            <div class="code-name">.icon-back
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-point"></span>
+            <div class="name">
+              点
+            </div>
+            <div class="code-name">.icon-point
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-edit"></span>
+            <div class="name">
+              编辑
+            </div>
+            <div class="code-name">.icon-edit
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-delete"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.icon-delete
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-upload-1"></span>
+            <div class="name">
+              上传
+            </div>
+            <div class="code-name">.icon-upload-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-explore"></span>
+            <div class="name">
+              探索-选中
+            </div>
+            <div class="code-name">.icon-explore
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ellipsis"></span>
+            <div class="name">
+              ellipsis
+            </div>
+            <div class="code-name">.icon-ellipsis
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sent"></span>
+            <div class="name">
+              发送
+            </div>
+            <div class="code-name">.icon-sent
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-list-list"></span>
+            <div class="name">
+              列表
+            </div>
+            <div class="code-name">.icon-list-list
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-list-icon"></span>
+            <div class="name">
+              列表
+            </div>
+            <div class="code-name">.icon-list-icon
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhongshi"></span>
+            <div class="name">
+              重试
+            </div>
+            <div class="code-name">.icon-zhongshi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-log"></span>
+            <div class="name">
+              Fork 记录
+            </div>
+            <div class="code-name">.icon-log
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-copy"></use>
+                </svg>
+                <div class="name">复制</div>
+                <div class="code-name">#icon-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrow-down"></use>
+                </svg>
+                <div class="name">箭头下</div>
+                <div class="code-name">#icon-arrow-down</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-usage-progress"></use>
+                </svg>
+                <div class="name">进度</div>
+                <div class="code-name">#icon-usage-progress</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gen-progress"></use>
+                </svg>
+                <div class="name">环形进度条</div>
+                <div class="code-name">#icon-gen-progress</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-back"></use>
+                </svg>
+                <div class="name">向左1</div>
+                <div class="code-name">#icon-back</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-point"></use>
+                </svg>
+                <div class="name">点</div>
+                <div class="code-name">#icon-point</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-edit"></use>
+                </svg>
+                <div class="name">编辑</div>
+                <div class="code-name">#icon-edit</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-delete"></use>
+                </svg>
+                <div class="name">删除</div>
+                <div class="code-name">#icon-delete</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-upload-1"></use>
+                </svg>
+                <div class="name">上传</div>
+                <div class="code-name">#icon-upload-1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-explore"></use>
+                </svg>
+                <div class="name">探索-选中</div>
+                <div class="code-name">#icon-explore</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ellipsis"></use>
+                </svg>
+                <div class="name">ellipsis</div>
+                <div class="code-name">#icon-ellipsis</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sent"></use>
+                </svg>
+                <div class="name">发送</div>
+                <div class="code-name">#icon-sent</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-list-list"></use>
+                </svg>
+                <div class="name">列表</div>
+                <div class="code-name">#icon-list-list</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-list-icon"></use>
+                </svg>
+                <div class="name">列表</div>
+                <div class="code-name">#icon-list-icon</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhongshi"></use>
+                </svg>
+                <div class="name">重试</div>
+                <div class="code-name">#icon-zhongshi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-log"></use>
+                </svg>
+                <div class="name">Fork 记录</div>
+                <div class="code-name">#icon-log</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

ktransformers/website/src/assets/iconfont/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 4550268 */
+  src: url('iconfont.woff2?t=1717950820214') format('woff2'),
+       url('iconfont.woff?t=1717950820214') format('woff'),
+       url('iconfont.ttf?t=1717950820214') format('truetype'),
+       url('iconfont.svg?t=1717950820214#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-copy:before {
+  content: "\e8b0";
+}
+
+.icon-arrow-down:before {
+  content: "\e85e";
+}
+
+.icon-usage-progress:before {
+  content: "\e651";
+}
+
+.icon-gen-progress:before {
+  content: "\e617";
+}
+
+.icon-back:before {
+  content: "\e779";
+}
+
+.icon-point:before {
+  content: "\e608";
+}
+
+.icon-edit:before {
+  content: "\e7dd";
+}
+
+.icon-delete:before {
+  content: "\e614";
+}
+
+.icon-upload-1:before {
+  content: "\e618";
+}
+
+.icon-explore:before {
+  content: "\e621";
+}
+
+.icon-ellipsis:before {
+  content: "\e657";
+}
+
+.icon-sent:before {
+  content: "\e60c";
+}
+
+.icon-list-list:before {
+  content: "\e62d";
+}
+
+.icon-list-icon:before {
+  content: "\e639";
+}
+
+.icon-zhongshi:before {
+  content: "\e6bd";
+}
+
+.icon-log:before {
+  content: "\e826";
+}
+

ktransformers/website/src/assets/iconfont/iconfont.js

+window._iconfont_svg_string_4550268='<svg><symbol id="icon-copy" viewBox="0 0 1024 1024"><path d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z" fill="#000000" ></path></symbol><symbol id="icon-arrow-down" viewBox="0 0 1024 1024"><path d="M554.666667 690.005333l228.864-228.864 60.330666 60.330667L512 853.333333l-331.861333-331.861333 60.330666-60.330667L469.333333 690.005333V170.666667h85.333334v519.338666z"  ></path></symbol><symbol id="icon-usage-progress" viewBox="0 0 1024 1024"><path d="M512 125.098667A386.901333 386.901333 0 1 1 125.098667 512 386.901333 386.901333 0 0 1 512 125.098667z" fill="#ACE9C5" ></path><path d="M512 318.634667A193.365333 193.365333 0 1 1 318.634667 512 193.365333 193.365333 0 0 1 512 318.634667z" fill="#2BA866" ></path></symbol><symbol id="icon-gen-progress" viewBox="0 0 1024 1024"><path d="M692.004733 714.930578l96.018649 96.017519C715.492309 877.950022 618.525386 918.887417 512 918.887417c-104.225342 0-199.297978-39.187779-271.287664-103.631964l96.127152-96.126023C384.097201 759.135506 445.230905 783.258278 512 783.258278c69.07253 0 132.114084-25.817007 180.004733-68.3277z m-202.61185-609.200883L489.395143 241.670781C350.16053 253.157439 240.741722 369.800759 240.741722 512c0 66.767965 24.122773 127.900539 64.127717 175.160512l-96.126022 96.126022C144.299232 711.295717 105.112583 616.225342 105.112583 512c0-217.130949 170.07894-394.539514 384.2803-406.270305z m325.8637 134.984901C879.700768 312.702022 918.887417 407.774658 918.887417 512c0 101.921907-37.474331 195.091214-99.395814 266.479611l-96.270694-96.268432C760.774358 635.667779 783.258278 576.460009 783.258278 512c0-66.767965-24.122773-127.901669-64.128848-175.161642l96.127153-96.124892zM534.608247 105.728565c95.334852 5.221722 181.928406 43.261174 248.678287 103.013722l-96.127152 96.127152c-41.869845-35.444415-94.631841-58.422252-152.553395-63.199788l0.00226-135.941086z" fill="#448AFF" fill-opacity=".6" ></path><path d="M489.392883 105.729695L489.395143 241.670781C350.16053 253.157439 240.741722 369.800759 240.741722 512c0 66.767965 24.122773 127.900539 64.127717 175.160512l-96.126022 96.126022C144.299232 711.295717 105.112583 616.225342 105.112583 512c0-217.130949 170.07894-394.539514 384.2803-406.270305z" fill="#448AFF" ></path></symbol><symbol id="icon-back" viewBox="0 0 1024 1024"><path d="M671.968176 911.99957c-12.287381 0-24.576482-4.67206-33.951566-14.047144L286.048434 545.984249c-18.751888-18.719204-18.751888-49.12028 0-67.872168L638.016611 126.111222c18.751888-18.751888 49.12028-18.751888 67.872168 0 18.751888 18.719204 18.751888 49.12028 0 67.872168l-318.016611 318.047574L705.888778 830.047574c18.751888 18.751888 18.751888 49.12028 0 67.872168C696.544658 907.32751 684.255557 911.99957 671.968176 911.99957z" fill="#2c2c2c" ></path></symbol><symbol id="icon-point" viewBox="0 0 1024 1024"><path d="M512 307.2a204.86826667 204.86826667 0 0 1 0 409.6 204.8 204.8 0 0 1 0-409.6z" fill="" ></path></symbol><symbol id="icon-edit" viewBox="0 0 1024 1024"><path d="M899.072 125.44c-28.672-28.672-67.072-44.544-107.52-44.544s-78.848 15.872-107.52 44.544L251.392 558.08c-34.304 34.304-60.416 74.752-78.336 119.808L88.576 896c-4.608 11.264-1.536 24.064 7.168 32.768 5.632 5.632 13.824 9.216 21.504 9.216 3.584 0 7.68-0.512 11.264-2.048l218.624-84.48c45.056-17.408 85.504-44.032 119.808-78.336l351.744-351.744 80.896-80.896c58.88-59.392 58.88-155.648-0.512-215.04z m-475.648 604.16c-28.16 28.16-61.44 50.176-98.816 64.512l-153.6 59.392 59.392-153.6c14.336-37.376 35.84-70.656 64.512-98.816L625.152 271.36l128.512 128.512-330.24 329.728z m432.64-432.128l-58.88 58.88-128.512-128.512L727.552 168.96c16.896-16.896 39.936-26.624 64.512-26.624s47.104 9.216 64.512 26.624c34.816 35.328 34.816 92.672-0.512 128.512z" fill="#333333" ></path></symbol><symbol id="icon-delete" viewBox="0 0 1024 1024"><path d="M742.4 944H281.6c-49.4 0-89.6-43.1-89.6-96V368h64v480c0 17.3 11.7 32 25.6 32h460.8c13.9 0 25.6-14.7 25.6-32V368h64v480c0 52.9-40.2 96-89.6 96z"  ></path><path d="M384 368h64v416h-64zM592 368h64v416h-64zM64 224h896v64H64z"  ></path><path d="M768 288H256V160c0-52.9 43.1-96 96-96h320c52.9 0 96 43.1 96 96v128z m-448-64h384v-64c0-17.6-14.4-32-32-32H352c-17.6 0-32 14.4-32 32v64z"  ></path></symbol><symbol id="icon-upload-1" viewBox="0 0 1024 1024"><path d="M323.034074 291.934815l383.620741 0c9.481481 0 17.256296-8.533333 17.256296-18.962963 0-10.42963-7.68-18.962963-17.256296-18.962963L323.034074 254.008889c-9.481481 0-17.256296 8.533333-17.256296 18.962963C305.777778 283.496296 313.457778 291.934815 323.034074 291.934815z" fill="#272536" ></path><path d="M522.05037 328.628148c-1.232593-1.232593-2.844444-1.896296-4.740741-1.991111-1.706667-0.094815-3.318519-0.094815-5.025185 0-1.896296 0.094815-3.508148 0.758519-4.740741 1.991111L349.013333 487.253333c-3.887407 3.887407-1.896296 12.325926 4.456296 18.773333 6.447407 6.447407 14.791111 8.438519 18.773333 4.456296l125.060741-125.060741 0 367.122963c0 9.671111 7.86963 17.540741 17.540741 17.540741l0 0c9.671111 0 17.540741-7.86963 17.540741-17.540741L532.385185 385.327407l125.060741 125.060741c3.887407 3.887407 12.325926 1.896296 18.773333-4.456296 6.447407-6.447407 8.438519-14.791111 4.456296-18.773333L522.05037 328.628148z" fill="#272536" ></path></symbol><symbol id="icon-explore" viewBox="0 0 1024 1024"><path d="M926.352541 89.231277c-0.029676-7.432273-1.212618-13.651928-2.837628-19.264762-31.228235-8.264221-71.898517 1.24127-106.283652 17.927301-7.049556 3.41068-23.762193 13.583366-48.51597 28.643364-10.237155 6.250354-19.264762 11.739369-23.251563 14.002922-0.384763 0.224104-0.608867 0.63752-0.958838 0.861624-67.557652-41.147142-146.571217-65.327868-231.319389-65.327868-246.251474 0-446.569802 200.319351-446.569802 446.564685 0 82.554204 22.904663 159.683862 62.105476 226.062666-46.315862 71.387887-69.2809 122.93182-63.283302 157.863401 1.24127 7.144724 13.555737 8.28878 20.316721 8.28878 137.989771 0 453.393207-302.802444 492.628814-341.399507C751.64859 393.022235 926.449755 184.667883 926.352541 89.231277L926.352541 89.231277zM305.847292 611.014084c-43.956118 0-79.744205-35.757388-79.744205-79.743182 0-43.956118 35.789111-79.744205 79.744205-79.744205 43.956118 0 79.743182 35.789111 79.743182 79.744205C385.591497 575.256696 349.803409 611.014084 305.847292 611.014084L305.847292 611.014084zM446.19783 387.730719c-52.760644 0-95.694479-42.937928-95.694479-95.692433 0-52.760644 42.933835-95.694479 95.694479-95.694479 52.761668 0 95.694479 42.933835 95.694479 95.694479C541.892309 344.79279 498.958474 387.730719 446.19783 387.730719L446.19783 387.730719zM893.595486 279.9469c-66.889433 99.330286-172.055634 218.596623-276.967032 321.751005-28.551266 28.104081-201.624067 195.822944-346.982666 285.198507 0.12689-0.097214 0.223081-0.160659 0.349971-0.224104 70.049403 45.708018 153.491837 72.536037 243.189741 72.536037 246.246357 0 446.565708-200.318328 446.565708-446.570825C959.716416 427.317319 935.282934 347.82587 893.595486 279.9469L893.595486 279.9469zM638.54051 799.720957c-35.180244 0-63.793932-28.614711-63.793932-63.794955 0-35.184337 28.613688-63.799048 63.793932-63.799048 35.184337 0 63.793932 28.614711 63.793932 63.799048C702.334441 771.106246 673.724847 799.720957 638.54051 799.720957L638.54051 799.720957zM638.54051 799.720957" fill="#615CED" ></path></symbol><symbol id="icon-ellipsis" viewBox="0 0 1024 1024"><path d="M322.292 505.5m-66 0a66 66 0 1 0 132 0 66 66 0 1 0-132 0Z" fill="#272636" ></path><path d="M509.791 505.5m-66 0a66 66 0 1 0 132 0 66 66 0 1 0-132 0Z" fill="#272636" ></path><path d="M701.791 505.5m-66 0a66 66 0 1 0 132 0 66 66 0 1 0-132 0Z" fill="#272636" ></path></symbol><symbol id="icon-sent" viewBox="0 0 1024 1024"><path d="M998.976 554.3232C1031.232 539.6032 1031.328 515.7952 998.976 501.0432L122.88 101.3312C90.624 86.6112 64.448 103.5072 64.384 138.4832L64 426.9952 773.568 527.6672 64 628.3392 64.384 916.8832C64.448 952.1152 90.528 968.7872 122.88 954.0352L998.976 554.3232Z"  ></path></symbol><symbol id="icon-list-list" viewBox="0 0 1024 1024"><path d="M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM419.028 543.17h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z" fill="" ></path><path d="M256.037 255.953m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="" ></path><path d="M256.037 510.787m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="" ></path><path d="M256.037 767.621m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="" ></path></symbol><symbol id="icon-list-icon" viewBox="0 0 1024 1024"><path d="M841.6 489.6h-214.4c-48 0-86.4-38.4-86.4-86.4V188.8c0-48 38.4-86.4 86.4-86.4h214.4c48 0 86.4 38.4 86.4 86.4v214.4c0 48-38.4 86.4-86.4 86.4z m-211.2-320c-12.8 0-22.4 9.6-22.4 22.4v214.4c0 12.8 9.6 22.4 22.4 22.4h214.4c12.8 0 22.4-9.6 22.4-22.4V188.8c0-12.8-9.6-22.4-22.4-22.4h-214.4zM393.6 489.6H182.4c-48 0-86.4-38.4-86.4-86.4V188.8c0-48 38.4-86.4 86.4-86.4h214.4c48 0 86.4 38.4 86.4 86.4v214.4c-3.2 48-41.6 86.4-89.6 86.4z m-211.2-320c-12.8 0-22.4 9.6-22.4 19.2v214.4c0 12.8 9.6 22.4 22.4 22.4h214.4c12.8 0 22.4-9.6 22.4-22.4V188.8c0-12.8-9.6-22.4-22.4-22.4H182.4zM841.6 937.6h-214.4c-48 0-86.4-38.4-86.4-86.4v-214.4c0-48 38.4-86.4 86.4-86.4h214.4c48 0 86.4 38.4 86.4 86.4v214.4c0 48-38.4 86.4-86.4 86.4z m-211.2-323.2c-12.8 0-22.4 9.6-22.4 22.4v214.4c0 12.8 9.6 22.4 22.4 22.4h214.4c12.8 0 22.4-9.6 22.4-22.4v-214.4c0-12.8-9.6-22.4-22.4-22.4h-214.4zM393.6 937.6H182.4c-48 0-86.4-38.4-86.4-86.4v-214.4c0-48 38.4-86.4 86.4-86.4h214.4c48 0 86.4 38.4 86.4 86.4v214.4c-3.2 48-41.6 86.4-89.6 86.4zM182.4 614.4c-12.8 0-22.4 9.6-22.4 22.4v214.4c0 12.8 9.6 22.4 22.4 22.4h214.4c12.8 0 22.4-9.6 22.4-22.4v-214.4c0-12.8-9.6-22.4-22.4-22.4H182.4z" fill="#333333" ></path></symbol><symbol id="icon-zhongshi" viewBox="0 0 1024 1024"><path d="M973.53044 167.133265l-65.609003 50.468463A491.226376 491.226376 0 0 0 522.971405 33.282123C253.074841 33.282123 34.74388 247.370807 34.378166 512.220525c-0.365714 265.142289 218.550389 480.108685 488.593239 480.108686 211.016691 0 390.728306-131.291147 459.189873-315.245039a9.069695 9.069695 0 0 0-5.851416-11.775975l-65.82843-22.308523a9.435408 9.435408 0 0 0-11.775975 5.485702 392.48373 392.48373 0 0 1-92.525516 141.896839 402.650566 402.650566 0 0 1-282.915965 115.12661c-54.125598 0-106.495772-10.386263-155.793952-30.793077a398.627717 398.627717 0 0 1-212.845258-209.188123 383.779749 383.779749 0 0 1-31.451361-152.868244c0-53.1016 10.532549-104.374633 31.451361-152.868243 20.114243-46.738186 49.005609-88.795238 85.723245-124.85459a401.260854 401.260854 0 0 1 282.915965-115.12661c54.052456 0 106.422629 10.459406 155.720809 30.866219a398.627717 398.627717 0 0 1 159.52423 120.100314l-69.997565 53.686742a9.069695 9.069695 0 0 0 3.437707 16.091394l204.287562 49.151895c5.851416 1.316569 11.556547-2.998851 11.556547-8.777124l0.950855-206.554986a9.508551 9.508551 0 0 0-15.213681-7.167985z" fill="#000000" ></path></symbol><symbol id="icon-log" viewBox="0 0 1024 1024"><path d="M288 64c70.692 0 128 57.308 128 128 0 58.192-38.833 107.315-91.998 122.867L324 571.5h225c48.8 0 84.134-19.864 110.1-62.009 15.655-25.408 27.76-58.805 36.092-100.127C648.71 390.177 616 344.408 616 291c0-70.692 57.308-128 128-128 70.692 0 128 57.308 128 128 0 62.814-45.245 115.06-104.923 125.925-9.94 52.391-25.407 95.81-46.677 130.334-38.644 62.721-96.365 95.58-169.189 96.231l-2.211 0.01H324l0.002 65.633c52.52 15.363 91.052 63.486 91.98 120.75L416 832c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128 0-58.193 38.833-107.315 91.999-122.868V314.868C198.833 299.315 160 250.193 160 192c0-70.692 57.308-128 128-128z" fill="#333333" ></path></symbol></svg>',function(l){var t=(t=document.getElementsByTagName("script"))[t.length-1],c=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,e,a,h,n=function(t,c){c.parentNode.insertBefore(t,c)};if(c&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,c=document.createElement("div");c.innerHTML=l._iconfont_svg_string_4550268,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(t=document.body).firstChild?n(c,t.firstChild):t.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(e=i,a=l.document,h=!1,d(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,s())})}function s(){h||(h=!0,e())}function d(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(d,50)}s()}}(window);
\ No newline at end of file

ktransformers/website/src/assets/iconfont/iconfont.json

+{
+  "id": "4550268",
+  "name": "Lexllama",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "Lexllama开源项目使用",
+  "glyphs": [
+    {
+      "icon_id": "11372665",
+      "name": "复制",
+      "font_class": "copy",
+      "unicode": "e8b0",
+      "unicode_decimal": 59568
+    },
+    {
+      "icon_id": "34202237",
+      "name": "箭头下",
+      "font_class": "arrow-down",
+      "unicode": "e85e",
+      "unicode_decimal": 59486
+    },
+    {
+      "icon_id": "7766233",
+      "name": "进度",
+      "font_class": "usage-progress",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "38865122",
+      "name": "环形进度条",
+      "font_class": "gen-progress",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "577406",
+      "name": "向左1",
+      "font_class": "back",
+      "unicode": "e779",
+      "unicode_decimal": 59257
+    },
+    {
+      "icon_id": "1920286",
+      "name": "点",
+      "font_class": "point",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "8866967",
+      "name": "编辑",
+      "font_class": "edit",
+      "unicode": "e7dd",
+      "unicode_decimal": 59357
+    },
+    {
+      "icon_id": "10199175",
+      "name": "删除",
+      "font_class": "delete",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "1010111",
+      "name": "上传",
+      "font_class": "upload-1",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "351773",
+      "name": "探索-选中",
+      "font_class": "explore",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "564941",
+      "name": "ellipsis",
+      "font_class": "ellipsis",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "1048859",
+      "name": "发送",
+      "font_class": "sent",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "1304951",
+      "name": "列表",
+      "font_class": "list-list",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "8676284",
+      "name": "列表",
+      "font_class": "list-icon",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "22290034",
+      "name": "重试",
+      "font_class": "zhongshi",
+      "unicode": "e6bd",
+      "unicode_decimal": 59069
+    },
+    {
+      "icon_id": "22961085",
+      "name": "Fork 记录",
+      "font_class": "log",
+      "unicode": "e826",
+      "unicode_decimal": 59430
+    }
+  ]
+}

ktransformers/website/src/assets/iconfont/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+  <metadata>Created by iconfont</metadata>
+  <defs>
+  <font id="iconfont" horiz-adv-x="1024">
+    <font-face
+      font-family="iconfont"
+      font-weight="400"
+      font-stretch="normal"
+      units-per-em="1024"
+      ascent="896"
+      descent="-128"
+    />
+      <missing-glyph />
+      
+      <glyph glyph-name="copy" unicode="&#59568;" d="M394.666667 789.333333h448a74.666667 74.666667 0 0 0 74.666666-74.666666v-448a74.666667 74.666667 0 0 0-74.666666-74.666667H394.666667a74.666667 74.666667 0 0 0-74.666667 74.666667V714.666667a74.666667 74.666667 0 0 0 74.666667 74.666666z m0-64a10.666667 10.666667 0 0 1-10.666667-10.666666v-448a10.666667 10.666667 0 0 1 10.666667-10.666667h448a10.666667 10.666667 0 0 1 10.666666 10.666667V714.666667a10.666667 10.666667 0 0 1-10.666666 10.666666H394.666667z m245.333333-597.333333a32 32 0 0 0 64 0v-74.666667a74.666667 74.666667 0 0 0-74.666667-74.666666H181.333333a74.666667 74.666667 0 0 0-74.666666 74.666666V501.333333a74.666667 74.666667 0 0 0 74.666666 74.666667h74.666667a32 32 0 0 0 0-64h-74.666667a10.666667 10.666667 0 0 1-10.666666-10.666667v-448a10.666667 10.666667 0 0 1 10.666666-10.666666h448a10.666667 10.666667 0 0 1 10.666667 10.666666v74.666667z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="arrow-down" unicode="&#59486;" d="M554.666667 205.99466700000005l228.864 228.864 60.330666-60.330667L512 42.66666699999996l-331.861333 331.861333 60.330666 60.330667L469.333333 205.99466700000005V725.333333h85.333334v-519.338666z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="usage-progress" unicode="&#58961;" d="M512 770.901333A386.901333 386.901333 0 1 0 125.098667 384 386.901333 386.901333 0 0 0 512 770.901333zM512 577.365333A193.365333 193.365333 0 1 0 318.634667 384 193.365333 193.365333 0 0 0 512 577.365333z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="gen-progress" unicode="&#58903;" d="M692.004733 181.06942200000003l96.018649-96.017519C715.492309 18.04997800000001 618.525386-22.887417000000028 512-22.887417000000028c-104.225342 0-199.297978 39.187779-271.287664 103.631964l96.127152 96.126023C384.097201 136.86449400000004 445.230905 112.74172199999998 512 112.74172199999998c69.07253 0 132.114084 25.817007 180.004733 68.3277z m-202.61185 609.200883L489.395143 654.329219C350.16053 642.8425609999999 240.741722 526.199241 240.741722 384c0-66.767965 24.122773-127.900539 64.127717-175.160512l-96.126022-96.126022C144.299232 184.70428300000003 105.112583 279.77465800000004 105.112583 384c0 217.130949 170.07894 394.539514 384.2803 406.270305z m325.8637-134.984901C879.700768 583.2979780000001 918.887417 488.225342 918.887417 384c0-101.921907-37.474331-195.091214-99.395814-266.479611l-96.270694 96.268432C760.774358 260.332221 783.258278 319.539991 783.258278 384c0 66.767965-24.122773 127.901669-64.128848 175.161642l96.127153 96.124892zM534.608247 790.271435c95.334852-5.221722 181.928406-43.261174 248.678287-103.013722l-96.127152-96.127152c-41.869845 35.444415-94.631841 58.422252-152.553395 63.199788l0.00226 135.941086zM489.392883 790.270305L489.395143 654.329219C350.16053 642.8425609999999 240.741722 526.199241 240.741722 384c0-66.767965 24.122773-127.900539 64.127717-175.160512l-96.126022-96.126022C144.299232 184.70428300000003 105.112583 279.77465800000004 105.112583 384c0 217.130949 170.07894 394.539514 384.2803 406.270305z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="back" unicode="&#59257;" d="M671.968176-15.999569999999949c-12.287381 0-24.576482 4.67206-33.951566 14.047144L286.048434 350.015751c-18.751888 18.719204-18.751888 49.12028 0 67.872168L638.016611 769.888778c18.751888 18.751888 49.12028 18.751888 67.872168 0 18.751888-18.719204 18.751888-49.12028 0-67.872168l-318.016611-318.047574L705.888778 65.95242599999995c18.751888-18.751888 18.751888-49.12028 0-67.872168C696.544658-11.327509999999961 684.255557-15.999569999999949 671.968176-15.999569999999949z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="point" unicode="&#58888;" d="M512 588.8a204.86826667 204.86826667 0 0 0 0-409.6 204.8 204.8 0 0 0 0 409.6z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="edit" unicode="&#59357;" d="M899.072 770.56c-28.672 28.672-67.072 44.544-107.52 44.544s-78.848-15.872-107.52-44.544L251.392 337.91999999999996c-34.304-34.304-60.416-74.752-78.336-119.808L88.576 0c-4.608-11.264-1.536-24.064 7.168-32.768 5.632-5.632 13.824-9.216 21.504-9.216 3.584 0 7.68 0.512 11.264 2.048l218.624 84.48c45.056 17.408 85.504 44.032 119.808 78.336l351.744 351.744 80.896 80.896c58.88 59.392 58.88 155.648-0.512 215.04z m-475.648-604.16c-28.16-28.16-61.44-50.176-98.816-64.512l-153.6-59.392 59.392 153.6c14.336 37.376 35.84 70.656 64.512 98.816L625.152 624.64l128.512-128.512-330.24-329.728z m432.64 432.128l-58.88-58.88-128.512 128.512L727.552 727.04c16.896 16.896 39.936 26.624 64.512 26.624s47.104-9.216 64.512-26.624c34.816-35.328 34.816-92.672-0.512-128.512z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="delete" unicode="&#58900;" d="M742.4-48H281.6c-49.4 0-89.6 43.1-89.6 96V528h64v-480c0-17.3 11.7-32 25.6-32h460.8c13.9 0 25.6 14.7 25.6 32V528h64v-480c0-52.9-40.2-96-89.6-96zM384 528h64v-416h-64zM592 528h64v-416h-64zM64 672h896v-64H64zM768 608H256V736c0 52.9 43.1 96 96 96h320c52.9 0 96-43.1 96-96v-128z m-448 64h384v64c0 17.6-14.4 32-32 32H352c-17.6 0-32-14.4-32-32v-64z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="upload-1" unicode="&#58904;" d="M323.034074 604.0651849999999l383.620741 0c9.481481 0 17.256296 8.533333 17.256296 18.962963 0 10.42963-7.68 18.962963-17.256296 18.962963L323.034074 641.991111c-9.481481 0-17.256296-8.533333-17.256296-18.962963C305.777778 612.503704 313.457778 604.0651849999999 323.034074 604.0651849999999zM522.05037 567.371852c-1.232593 1.232593-2.844444 1.896296-4.740741 1.991111-1.706667 0.094815-3.318519 0.094815-5.025185 0-1.896296-0.094815-3.508148-0.758519-4.740741-1.991111L349.013333 408.746667c-3.887407-3.887407-1.896296-12.325926 4.456296-18.773333 6.447407-6.447407 14.791111-8.438519 18.773333-4.456296l125.060741 125.060741 0-367.122963c0-9.671111 7.86963-17.540741 17.540741-17.540741l0 0c9.671111 0 17.540741 7.86963 17.540741 17.540741L532.385185 510.672593l125.060741-125.060741c3.887407-3.887407 12.325926-1.896296 18.773333 4.456296 6.447407 6.447407 8.438519 14.791111 4.456296 18.773333L522.05037 567.371852z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="explore" unicode="&#58913;" d="M926.352541 806.768723c-0.029676 7.432273-1.212618 13.651928-2.837628 19.264762-31.228235 8.264221-71.898517-1.24127-106.283652-17.927301-7.049556-3.41068-23.762193-13.583366-48.51597-28.643364-10.237155-6.250354-19.264762-11.739369-23.251563-14.002922-0.384763-0.224104-0.608867-0.63752-0.958838-0.861624-67.557652 41.147142-146.571217 65.327868-231.319389 65.327868-246.251474 0-446.569802-200.319351-446.569802-446.564685 0-82.554204 22.904663-159.683862 62.105476-226.062666-46.315862-71.387887-69.2809-122.93182-63.283302-157.863401 1.24127-7.144724 13.555737-8.28878 20.316721-8.28878 137.989771 0 453.393207 302.802444 492.628814 341.399507C751.64859 502.977765 926.449755 711.332117 926.352541 806.768723L926.352541 806.768723zM305.847292 284.985916c-43.956118 0-79.744205 35.757388-79.744205 79.743182 0 43.956118 35.789111 79.744205 79.744205 79.744205 43.956118 0 79.743182-35.789111 79.743182-79.744205C385.591497 320.74330399999997 349.803409 284.985916 305.847292 284.985916L305.847292 284.985916zM446.19783 508.269281c-52.760644 0-95.694479 42.937928-95.694479 95.692433 0 52.760644 42.933835 95.694479 95.694479 95.694479 52.761668 0 95.694479-42.933835 95.694479-95.694479C541.892309 551.20721 498.958474 508.269281 446.19783 508.269281L446.19783 508.269281zM893.595486 616.0531c-66.889433-99.330286-172.055634-218.596623-276.967032-321.751005-28.551266-28.104081-201.624067-195.822944-346.982666-285.198507 0.12689 0.097214 0.223081 0.160659 0.349971 0.224104 70.049403-45.708018 153.491837-72.536037 243.189741-72.536037 246.246357 0 446.565708 200.318328 446.565708 446.570825C959.716416 468.682681 935.282934 548.17413 893.595486 616.0531L893.595486 616.0531zM638.54051 96.279043c-35.180244 0-63.793932 28.614711-63.793932 63.794955 0 35.184337 28.613688 63.799048 63.793932 63.799048 35.184337 0 63.793932-28.614711 63.793932-63.799048C702.334441 124.89375399999994 673.724847 96.279043 638.54051 96.279043L638.54051 96.279043zM638.54051 96.279043"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="ellipsis" unicode="&#58967;" d="M256.292 390.5c0-36.451 29.549-66 66-66s66 29.549 66 66c0 36.451-29.549 66-66 66-36.451 0-66-29.549-66-66zM443.791 390.5c-0-0-0-0-0-0 0-36.451 29.549-66 66-66 36.451 0 66 29.549 66 66 0 0 0 0 0 0 0 36.451-29.549 66-66 66-36.451 0-66-29.549-66-66zM635.791 390.5c0-36.451 29.549-66 66-66s66 29.549 66 66c0 36.451-29.549 66-66 66-36.451 0-66-29.549-66-66z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sent" unicode="&#58892;" d="M998.976 341.67679999999996C1031.232 356.3968 1031.328 380.2048 998.976 394.9568L122.88 794.6688C90.624 809.3888 64.448 792.4928 64.384 757.5168L64 469.0048 773.568 368.3328 64 267.6608 64.384-20.883199999999988C64.448-56.11519999999996 90.528-72.78719999999998 122.88-58.03520000000003L998.976 341.67679999999996Z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="list-list" unicode="&#58925;" d="M419.037 608.047h413.124c17.673 0 32 14.327 32 32s-14.327 32-32 32H419.037c-17.673 0-32-14.327-32-32s14.327-32 32-32zM419.028 352.83000000000004h411.608c17.673 0 32 14.327 32 32s-14.327 32-32 32H419.028c-17.673 0-32-14.327-32-32s14.327-32 32-32zM832.161 160.19799999999998H419.037c-17.673 0-32-14.327-32-32s14.327-32 32-32h413.124c17.673 0 32 14.327 32 32s-14.327 32-32 32zM256.037 640.047m-64 0a64 64 0 1 1 128 0 64 64 0 1 1-128 0ZM256.037 385.213m-64 0a64 64 0 1 1 128 0 64 64 0 1 1-128 0ZM256.037 128.37900000000002m-64 0a64 64 0 1 1 128 0 64 64 0 1 1-128 0Z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="list-icon" unicode="&#58937;" d="M841.6 406.4h-214.4c-48 0-86.4 38.4-86.4 86.4V707.2c0 48 38.4 86.4 86.4 86.4h214.4c48 0 86.4-38.4 86.4-86.4v-214.4c0-48-38.4-86.4-86.4-86.4z m-211.2 320c-12.8 0-22.4-9.6-22.4-22.4v-214.4c0-12.8 9.6-22.4 22.4-22.4h214.4c12.8 0 22.4 9.6 22.4 22.4V707.2c0 12.8-9.6 22.4-22.4 22.4h-214.4zM393.6 406.4H182.4c-48 0-86.4 38.4-86.4 86.4V707.2c0 48 38.4 86.4 86.4 86.4h214.4c48 0 86.4-38.4 86.4-86.4v-214.4c-3.2-48-41.6-86.4-89.6-86.4z m-211.2 320c-12.8 0-22.4-9.6-22.4-19.2v-214.4c0-12.8 9.6-22.4 22.4-22.4h214.4c12.8 0 22.4 9.6 22.4 22.4V707.2c0 12.8-9.6 22.4-22.4 22.4H182.4zM841.6-41.60000000000002h-214.4c-48 0-86.4 38.4-86.4 86.4v214.4c0 48 38.4 86.4 86.4 86.4h214.4c48 0 86.4-38.4 86.4-86.4v-214.4c0-48-38.4-86.4-86.4-86.4z m-211.2 323.2c-12.8 0-22.4-9.6-22.4-22.4v-214.4c0-12.8 9.6-22.4 22.4-22.4h214.4c12.8 0 22.4 9.6 22.4 22.4v214.4c0 12.8-9.6 22.4-22.4 22.4h-214.4zM393.6-41.60000000000002H182.4c-48 0-86.4 38.4-86.4 86.4v214.4c0 48 38.4 86.4 86.4 86.4h214.4c48 0 86.4-38.4 86.4-86.4v-214.4c-3.2-48-41.6-86.4-89.6-86.4zM182.4 281.6c-12.8 0-22.4-9.6-22.4-22.4v-214.4c0-12.8 9.6-22.4 22.4-22.4h214.4c12.8 0 22.4 9.6 22.4 22.4v214.4c0 12.8-9.6 22.4-22.4 22.4H182.4z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="zhongshi" unicode="&#59069;" d="M973.53044 728.866735l-65.609003-50.468463A491.226376 491.226376 0 0 1 522.971405 862.717877C253.074841 862.717877 34.74388 648.629193 34.378166 383.779475c-0.365714-265.142289 218.550389-480.108685 488.593239-480.108686 211.016691 0 390.728306 131.291147 459.189873 315.245039a9.069695 9.069695 0 0 1-5.851416 11.775975l-65.82843 22.308523a9.435408 9.435408 0 0 1-11.775975-5.485702 392.48373 392.48373 0 0 0-92.525516-141.896839 402.650566 402.650566 0 0 0-282.915965-115.12661c-54.125598 0-106.495772 10.386263-155.793952 30.793077a398.627717 398.627717 0 0 0-212.845258 209.188123 383.779749 383.779749 0 0 0-31.451361 152.868244c0 53.1016 10.532549 104.374633 31.451361 152.868243 20.114243 46.738186 49.005609 88.795238 85.723245 124.85459a401.260854 401.260854 0 0 0 282.915965 115.12661c54.052456 0 106.422629-10.459406 155.720809-30.866219a398.627717 398.627717 0 0 0 159.52423-120.100314l-69.997565-53.686742a9.069695 9.069695 0 0 1 3.437707-16.091394l204.287562-49.151895c5.851416-1.316569 11.556547 2.998851 11.556547 8.777124l0.950855 206.554986a9.508551 9.508551 0 0 1-15.213681 7.167985z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="log" unicode="&#59430;" d="M288 832c70.692 0 128-57.308 128-128 0-58.192-38.833-107.315-91.998-122.867L324 324.5h225c48.8 0 84.134 19.864 110.1 62.009 15.655 25.408 27.76 58.805 36.092 100.127C648.71 505.823 616 551.592 616 605c0 70.692 57.308 128 128 128 70.692 0 128-57.308 128-128 0-62.814-45.245-115.06-104.923-125.925-9.94-52.391-25.407-95.81-46.677-130.334-38.644-62.721-96.365-95.58-169.189-96.231l-2.211-0.01H324l0.002-65.633c52.52-15.363 91.052-63.486 91.98-120.75L416 64c0-70.692-57.308-128-128-128-70.692 0-128 57.308-128 128 0 58.193 38.833 107.315 91.999 122.868V581.1320000000001C198.833 596.685 160 645.807 160 704c0 70.692 57.308 128 128 128z"  horiz-adv-x="1024" />
+      
+    </font>
+  </defs>
+</svg>

ktransformers/website/src/components/chat/index.vue

+<template>
+  <div class="chat-panel">
+    <!-- <div class="chat-model">{{ activeAssistant?.model }}</div> -->
+    <div class="chat-panel-inner flex-column">
+      <div class="chat-init flex-unit flex-column" v-if="isNotChating">
+        <div class="assistant-info flex-column flex-unit">
+          <div class="avatar">
+            <img src="../../../public/images/avatar.png" />
+          </div>
+          <div class="name">
+            {{ activeAssistant.name }}
+          </div>
+          <div class="desc">
+            {{ activeAssistant.description }}
+          </div>
+        </div>
+      </div>
+      <div class="chat-msg flex-unit" v-else>
+        <ul>
+          <li
+            class="chat-msg-item flex-row"
+            v-for="(msg, index) in localMessages"
+            :key="index"
+          >
+            <div class="avatar" v-if="msg.role == 'user'">
+              <img src="../../../public/images/user-filling.png" />
+            </div>
+            <div class="avatar" v-else>
+              <img src="../../../public/images/avatar.png" />
+            </div>
+            <div class="msg flex-unit">
+              <div class="title flex-row">
+                <div class="name">{{ msg.role }}</div>
+                <div class="time flex-row">
+                  {{ timeFormat(msg.created_at) }}
+                </div>
+              </div>
+              <div
+                class="content"
+                v-html="markedText(msg.content)"
+                ref="content_Ref"
+              ></div>
+              <div class="copy-btn flex-row" v-show="msgBttnBoxShow[index]">
+                <i
+                  class="iconfont icon-copy"
+                  @click="copy(createText(msg.content))"
+                ></i>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="scroll-box" v-show="showScrollButton" @click="scrollToBottom">
+        <i class="iconfont icon-arrow-down"></i>
+      </div>
+      <div class="chat-send">
+        <div
+          class="chat-box flex-row"
+          :style="{ height: textareaHeight + 'px' }"
+          ref="chatBox_Ref"
+        >
+          <button @click="StopOutput" class="stop-btn" v-show="isRunning">
+            stop
+          </button>
+          <textarea
+            name="chat-input"
+            class="chat-input flex-unit"
+            :placeholder="inputPlaceholder"
+            v-model="inputQuestion"
+            @keydown="keyBoardCommitQuestion"
+            :disabled="inputDisabled"
+            :style="{ height: textareaHeight + 'px' }"
+            @input="handleInput"
+            ref="textarea_ref"
+            maxlength="2000"
+            cols="20"
+          ></textarea>
+          <i class="iconfont icon-sent" @click="clickCommitQuestion"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  nextTick,
+  PropType,
+  ref,
+  watch,
+  computed,
+  onMounted,
+} from "vue";
+import { IThread, IMessageData, IAssistant } from "@/utils/types";
+import { marked } from "marked";
+import { createMessage } from "@/api/message";
+import { createRun, cancelRun } from "@/api/run";
+import { getAssistant } from "@/api/assistant";
+import { createThread } from "@/api/thread";
+import BScroll from "better-scroll";
+import { useRouter, useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { ElMessage } from "element-plus";
+import { tr } from "element-plus/es/locale";
+import copy from "@/utils/copy";
+export default defineComponent({
+  name: "ChatChat",
+  props: {
+    messages: {
+      type: Array as PropType<IMessageData[]>,
+      required: true,
+    },
+    chatInit: {
+      type: Boolean,
+      required: true,
+    },
+    activeAssistant: {
+      type: Object as PropType<IAssistant>,
+      required: true,
+    },
+    activeThread: {
+      type: Object as PropType<IThread>,
+      required: true,
+    },
+    inputDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, context) {
+    const { t } = useI18n();
+    const router = useRouter();
+    const route = useRoute();
+    const localMessages = ref<IMessageData[]>([...props.messages]);
+    const showScrollButton = ref(false);
+    const messageScroll = ref<BScroll | null>(null);
+    const inputQuestion = ref<string>("");
+    const inputDisabled = ref(false);
+    const msgBttnBoxShow = ref<boolean[]>([]);
+    const answer = ref("");
+    const activeThread = ref<IThread>({} as IThread);
+    const activeAssistant = ref<IAssistant>({} as IAssistant);
+    const isNotChating = ref(true);
+    const isRunning = ref(false);
+    const stopRunId = ref<string>("");
+    const shouldContinueReceiving = ref(true);
+    const textareaHeight = ref(48);
+    const chatBox_Ref = ref();
+    const textarea_ref = ref();
+    const content_Ref = ref();
+    // Boolean if go
+    isNotChating.value = props.chatInit;
+    activeThread.value = props.activeThread;
+    activeAssistant.value = props.activeAssistant;
+    watch(
+      () => props.messages,
+      (newMessages) => {
+        localMessages.value = [...newMessages];
+        msgBttnBoxShow.value = new Array(newMessages.length).fill(true);
+      }
+    );
+    watch(
+      () => props.inputDisabled,
+      (newValue) => {
+        inputDisabled.value = newValue;
+      }
+    );
+    // Update scrollbars and scrolling events
+    watch(
+      () => localMessages.value,
+      (newMessages) => {
+        if (messageScroll.value) {
+          scrollToTop();
+          messageScroll.value.destroy();
+          messageScroll.value = null;
+        }
+        if (!isNotChating.value) {
+          nextTick(() => {
+            messageScroll.value = new BScroll(".chat-msg", {
+              click: true,
+              mouseWheel: true,
+              probeType: 3, //Only when set to 3 can the event of scrolling binding be triggered
+            });
+          });
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+    watch(
+      () => messageScroll.value,
+      (newValue) => {
+        if (newValue) {
+          messageScroll.value?.on("scroll", handleScroll);
+          showScrollButton.value = false;
+          scrollToBottom();
+        }
+      }
+    );
+    watch(
+      () => props.chatInit,
+      (newValue) => {
+        isNotChating.value = newValue;
+      }
+    );
+    watch(
+      () => props.activeThread,
+      (newValue) => {
+        activeThread.value = newValue;
+      }
+    );
+    watch(
+      () => props.activeAssistant,
+      (newValue) => {
+        activeAssistant.value = newValue;
+      }
+    );
+
+    const handleInput = (event:any) => {
+      adjustHeight();
+      const maxLength = 2000; 
+      if (inputQuestion.value?.length > maxLength) {
+        event.preventDefault(); 
+        inputQuestion.value = inputQuestion.value.substring(0, maxLength); 
+      }
+    };
+    const adjustHeight = () => {
+      const currentScrollTop = textarea_ref.value.scrollTop;
+      textarea_ref.value.style.height = textarea_ref.value.scrollHeight + "px";
+      chatBox_Ref.value.style.height = textarea_ref.value.style.height;
+      textarea_ref.value.scrollTop = currentScrollTop;
+    };
+
+    const inputPlaceholder = computed(() => {
+      if (typeof activeAssistant.value.name != "undefined") {
+        return replaceAssistant(t("chat.inputTip"), activeAssistant.value.name);
+      } else {
+        return t("chat.inputTip");
+      }
+    });
+    // Block events
+    const StopOutput = async () => {
+      shouldContinueReceiving.value = false;
+      try {
+        const response = await cancelRun(
+          activeThread.value.id,
+          stopRunId.value
+        );
+        if (!response.ok) {
+          console.error("Failed to cancel run");
+        }
+      } catch (error) {
+        console.error("Failed to cancel run:", error);
+      }
+    };
+    // dialogue
+    const commitQuestion: () => void = async () => {
+      const question = inputQuestion.value;
+      // If it came in by clicking on assistants without clicking on thread, or through preview
+      if (Object.keys(activeThread.value).length == 0) {
+        try {
+          let res = {} as IThread;
+          // If you click thread and do not select assistant
+          if (route.name == "preview") {
+            let metadata = {
+              hidden: "true",
+            };
+            res = await createThread(undefined, undefined, metadata);
+          } else {
+            res = await createThread();
+          }
+          activeThread.value = res;
+        } catch (err) {
+          console.error(err);
+        }
+      }
+      //If you click thread and do not select assistant
+      else if (Object.keys(activeAssistant.value).length == 0) {
+        try {
+          const messageOfAssistant = props.messages.find(
+            (message) => message.role === "assistant"
+          );
+          if (messageOfAssistant && messageOfAssistant.assistant_id) {
+            const res = await getAssistant(messageOfAssistant.assistant_id);
+            activeAssistant.value = res;
+          }
+        } catch (err) {
+          console.error(err);
+        }
+      }
+      if (question) {
+        inputQuestion.value = "";
+        textareaHeight.value = 48;
+        // inputDisabled.value = true;
+        isNotChating.value = false;
+        isRunning.value = true;
+        await createMessage(activeThread.value.id, question)
+          .then((res: any) => {})
+          .catch((err: any) => {
+            ElMessage({
+              type: "warning",
+              message: "Request error",
+            });
+            return;
+          });
+        // Current message queue insertion issue
+        localMessages.value.push({
+          role: "user",
+          content: [
+            { type: "text", text: { value: question }, annotatons: [] },
+          ],
+          created_at: Date.now() / 1000,
+        });
+        msgBttnBoxShow.value.push(true);
+        // Insert answer into the current message queue
+        localMessages.value.push({
+          role: "assistant",
+          content: [{ type: "text", text: { value: "" }, annotatons: [] }],
+          created_at: Date.now() / 1000,
+        });
+        msgBttnBoxShow.value.push(false);
+        try {
+          const asyncGenerator = createRun(
+            {
+              assistant_id: activeAssistant.value.id,
+              stream: true,
+            },
+            activeThread.value.id
+          );
+          for await (const word of asyncGenerator) {
+            if (!shouldContinueReceiving.value) {
+              break;
+            }
+            if (word.length == 36) {
+              stopRunId.value = word;
+              console.log(stopRunId.value);
+            } else {
+              answer.value += word;
+              const index = localMessages.value.length - 1;
+              localMessages.value[index].content[0].text.value += word;
+              if (answer.value.length <= 3) {
+                localMessages.value[index].created_at = Date.now() / 1000;
+              }
+            }
+          }
+        } catch (err) {
+          console.error(err);
+        }
+        shouldContinueReceiving.value = true;
+        answer.value = "";
+        inputDisabled.value = false;
+        msgBttnBoxShow.value[msgBttnBoxShow.value.length - 1] = true;
+        scrollToBottom();
+        isRunning.value = false;
+        context.emit("updateAssistant", true);
+        textarea_ref.value.focus();
+      }
+    };
+    // Keyboard event stabilization
+    const keyBoardCommitQuestion = (event: any) => {
+      const question = inputQuestion.value?.trim();
+      if (event.keyCode === 13) {
+        event.preventDefault();
+
+        const cursorPosition = event.target.selectionStart;
+        if ((event.metaKey || event.ctrlKey) && question) {
+          event.target.value =
+            event.target.value.substring(0, cursorPosition) +
+            "\n" +
+            event.target.value.substring(cursorPosition);
+          event.target.selectionStart = event.target.selectionEnd =
+            cursorPosition + 1;
+          adjustHeight();
+          return;
+        }
+        if (!question) {
+          ElMessage({
+            message: "Please enter the content!",
+            type: "warning",
+            plain: true,
+          });
+          return;
+        }
+        if (!isRunning.value) {
+          commitQuestion();
+          inputQuestion.value = "";
+        }
+      }
+    };
+    const clickCommitQuestion = () => {
+      if (!isRunning.value && inputQuestion.value?.trim() != "") {
+        commitQuestion();
+        return;
+      }
+      ElMessage({
+        message: "Please enter the content!",
+        type: "warning",
+        plain: true,
+      });
+    };
+    //Bottom scrolling
+    const scrollToBottom = () => {
+      //If messageScroll. value exists
+      if (messageScroll.value) {
+        //Call the scrollTo method of messageScroll. value and scroll to the bottom
+        messageScroll.value.scrollTo(0, messageScroll.value?.maxScrollY, 800);
+      }
+    };
+    // Top scrolling
+    const scrollToTop = () => {
+      if (messageScroll.value) {
+        messageScroll.value.scrollTo(0, messageScroll.value?.minScrollY, 800);
+      }
+    };
+    // Handling rolling events
+    const handleScroll = (pos: any) => {
+      if (messageScroll.value) {
+        const distanceToBottom =
+          messageScroll.value.y - messageScroll.value.maxScrollY;
+        showScrollButton.value = distanceToBottom > 100;
+      }
+    };
+    // Replace characters
+
+    function replaceAssistant(input: string, newString: string) {
+      return input.replace(/assistant/g, newString);
+    }
+    // Extract the markup text to convert the passed in object array into an HTML string parsed by market.js
+    const markedText = (content: object[]) => {
+      let context = "";
+      for (const item of content) {
+        if ((item as { type: string }).type === "text") {
+          context += ((item as { text: object }).text as { value: string })
+            .value;
+        }
+      }
+      return marked.parse(context);
+    };
+    // Extract text content
+    const createText = (content: object[]) => {
+      let context = "";
+      for (const item of content) {
+        if ((item as { type: string }).type === "text") {
+          context += ((item as { text: object }).text as { value: string })
+            .value;
+        }
+      }
+      return context;
+    };
+    // Time formatting
+    const timeFormat = (timestamp: number | undefined) => {
+      if (!timestamp) {
+        return "";
+      }
+      const date = new Date(timestamp * 1000);
+      // Obtain various time sections
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0"); // The month starts from 0 and needs to be increased by 1, with zeros added
+      const day = String(date.getDate()).padStart(2, "0"); // Zero padding
+      const hours = String(date.getHours()).padStart(2, "0"); // Zero padding
+      const minutes = String(date.getMinutes()).padStart(2, "0"); // Zero padding
+      const seconds = String(date.getSeconds()).padStart(2, "0"); // Zero padding
+      // Format as "YYYY-MM-DD HH: mm: ss"
+      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      return formattedDate;
+    };
+    onMounted(() => {
+      adjustHeight();
+    });
+    return {
+      inputQuestion,
+      inputDisabled,
+      msgBttnBoxShow,
+      localMessages,
+      textareaHeight,
+      answer,
+      StopOutput,
+      isNotChating,
+      handleInput,
+      chatBox_Ref,
+      adjustHeight,
+      content_Ref,
+      markedText,
+      timeFormat,
+      createText,
+      inputPlaceholder,
+      keyBoardCommitQuestion,
+      clickCommitQuestion,
+      messageScroll,
+      showScrollButton,
+      commitQuestion,
+      scrollToBottom,
+      scrollToTop,
+      isRunning,
+      copy,
+      replaceAssistant,
+      textarea_ref,
+    };
+  },
+});
+</script>
+
+<style scoped lang="stylus">
+@import '@/assets/css/mixins.styl';
+
+.chat-panel {
+  justify-content: center;
+  display: flex;
+  position: relative;
+  height: 100%;
+
+  .chat-model {
+    font-size: 16px;
+    font-weight: bold;
+    position: absolute;
+    top: 20px;
+    left: 30px;
+  }
+
+  .chat-panel-inner {
+    width: 920px;
+    padding-top: 80px;
+  }
+
+  .chat-init {
+    padding: 0 20px;
+
+    .assistant-info {
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+
+      .avatar img {
+        width: 70px;
+        height: 70px;
+      }
+
+      .name {
+        margin: 40px 0;
+        font-size: 20px;
+        font-weight: bold;
+      }
+
+      .desc {
+        color: $gray_40;
+      }
+    }
+
+    .assistant-tips {
+      margin-bottom: 80px;
+
+      .tips-item {
+        width: 44%;
+        height: 70px;
+        line-height: 70px;
+        float: left;
+        border: 1px solid $border_gray_light_normal;
+        border-radius: 8px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding: 0 20px;
+        color: $gray_40;
+
+        &:nth-child(odd) {
+          margin-left: 4%;
+          margin-right: 4%;
+        }
+
+        &:nth-child(even) {
+          margin-right: 4%;
+        }
+
+        .tips-ops {
+          display: none;
+          width: 24px;
+          height: 24px;
+          line-height: 24px;
+          border-radius: 4px;
+          text-align: center;
+          border: 1px solid $border_gray_light_normal;
+
+          i {
+            font-size: 20px;
+          }
+        }
+
+        &:hover {
+          cursor: pointer;
+          background-color: $bg_gray_light_hover;
+
+          .tips-ops {
+            display: block;
+            background-color: #FFFFFF;
+          }
+        }
+      }
+    }
+  }
+
+  .chat-msg {
+    overflow-y: hidden;
+
+    ul {
+      li.chat-msg-item {
+        margin-bottom: 40px;
+        align-items: flex-start !important;
+        // border: 1px solid;
+        border-radius: 15px;
+        padding: 20px;
+        margin-right: 20px;
+        background-color: #313344;
+        box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 10px 10px 8px rgba(0, 0, 0, 0.07);
+
+        .avatar {
+          margin-right: 15px;
+          width: 36px;
+          height: 36px;
+
+          img {
+            width: 100%;
+            height: 100%;
+            border-radius: 25px;
+          }
+        }
+
+        .msg {
+          .title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+            height: 36px;
+            line-height: 24px;
+
+            .time {
+              justify-content: center;
+              // margin-bottom: 12px;
+              line-height: 20px;
+              font-size: 14px;
+              color: $gray_80;
+            }
+
+            .name {
+              color: #edf2ea;
+              font-size: 16px;
+              font-weight: bold;
+              margin-right: 15px;
+            }
+
+            .tips {
+              font-size: 14px;
+              color: $gray_50;
+            }
+          }
+
+          .content {
+            max-width: 829px;
+            color: #edf2ea;
+            font-size: 14px;
+            line-height: 20px;
+            word-wrap: break-word;
+            margin-bottom: 12px;
+          }
+
+          .copy-btn {
+            margin-top: 10px;
+            justify-content: left;
+
+            i {
+              font-size: 20px;
+              color: $gray_70;
+
+              &:hover {
+                cursor: pointer;
+                color: $gray_50;
+
+                .tips-ops {
+                  display: block;
+                  background-color: #FFFFFF;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .chat-send {
+    width: 900px;
+    padding: 40px 0;
+    position: relative;
+
+    .chat-box {
+      width: 100%;
+      height: auto;
+      min-height: 48px;
+      max-height: 192px !important;
+      border: none;
+      border-radius: 15px;
+      background: white;
+      line-height: 48px;
+
+      // overflow: hidden;
+      .chat-input {
+        height: auto;
+        min-width: 900px;
+        max-height: 192px !important;
+        width: 100%;
+        border: none;
+        overflow-anchor: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+        resize: none;
+        background: white;
+        display: inline-block;
+      }
+
+      .chat-input::-webkit-scrollbar {
+        width: 10px;
+      }
+
+      .chat-input::-webkit-scrollbar-track {
+        background-color: #f1f1f1;
+      }
+
+      .chat-input::-webkit-scrollbar-thumb {
+        background-color: #888;
+        border-radius: 5px;
+      }
+
+      .chat-input::-webkit-scrollbar-thumb:hover {
+        background-color: #555;
+      }
+
+      .chat-input::-webkit-resizer {
+        display: none;
+      }
+
+      .stop-btn {
+        border: none;
+        width: 60px;
+        position: absolute;
+        right: 50%;
+        transform: translateX(50%);
+        top: -40px;
+        -webkit-border-radius: 50;
+        -moz-border-radius: 50;
+        border-radius: 50px;
+        font-family: Arial;
+        color: #ffffff;
+        font-size: 16px;
+        background: #cacdd1;
+        padding: 10px 15px 10px 15px;
+        text-decoration: none;
+      }
+
+      .stop-btn:hover {
+        background: #8080e1;
+        text-decoration: none;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.scroll-box {
+  position: absolute;
+  bottom: 130px;
+  right: 50%;
+  transform: translateX(50%);
+  margin: 0 auto;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  border: 1px solid $gray_80;
+  background-color: var(--el-bg-color-overlay);
+  box-shadow: var(--el-box-shadow-lighter);
+  text-align: center;
+  line-height: 32px;
+  color: #1989fa;
+
+  i {
+    font-size: 24px;
+    color: $gray_60;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: $bg_gray_light_hover;
+
+    i {
+      color: $gray_50;
+    }
+  }
+}
+</style>
\ No newline at end of file

ktransformers/website/src/conf/config.ts

+declare global {
+    interface Window {
+      configWeb: {
+        apiUrl: string;
+        port: string;
+       };
+     }
+  }
+
+export const baseURL = window.configWeb.apiUrl;
+export const basePort = window.configWeb.port;

ktransformers/website/src/locals/en.js

+// en.js
+export default {
+    home: {
+        explore: 'Explore',
+        language: 'Choose Language',
+        english: 'English',
+        chinese: 'Chinese',
+        today: 'Today',
+        previous:'Previous',
+        withoutAssistantTip:'The KTransformers of this record has been deleted. The user can only view historical conversation information and cannot continue the conversation!',
+        deleteThreadTip:'Deleting records will clear historical information~'
+    },
+    chat:{
+        inputTip:"Send a message and chat with the KTransformers ~",
+    },
+    explore:{
+        description: "Based on Lexllama, let’s create your own KTransformers~",
+        configuring: "Configuring",
+        completed: "Completed",
+        assistantName: "Name",
+        assistantDescription: "Description",
+        assistantStatus: "Status",
+        createAssistant: "Create New KTransformers",
+        deleteAssistant: "Are you sure to delete this? After deleting the KTransformers, its KVCache will also be cleared simultaneously~",
+    },
+    config:{
+        title:'Configure your KTransformers',
+        fileTip:"Only support text, docx, .ppt, .pdf format.",
+        reConfigTip:'Reconfig KTransformers needs to delete kvcache, please choose carefully',
+        secletFile:'Select Files',
+        outOfSize:'File size exceeds 10MB, please reselect',
+        fileExist:'The file already exists, please reselect',
+        createAssistant:'Assistant created successfully, click the build button to start building KVCache',
+    },
+    build:{
+        title:'Building Logs',
+        step1:'Parse uploded files',
+        parsingFileStep1:'File upload and reception completed',
+        parsingFileStep2:{
+            parse:"Parsing",
+            file:"file(s)",
+            total:'total',
+        },
+        parsingFileStep3:'Prompt loaded, ready to generate KVCache',
+        step2:'Generate KVCache',
+        generateStep1:'Generate KVCache calculation plan',
+        generateStep2:{
+            calculate:"calculating",
+            token:"tokens",
+            total:'total',
+        },
+        generateStep3:'KVCache has been generated successfully',
+        durationTime:'Duration:',
+        remainTime:'Time left:',
+        buildProgress:'Building Progress',
+        storageUsage:'KVCache Storage Usage',
+    }
+}

ktransformers/website/src/locals/index.js

+// index.js
+import { createI18n } from 'vue-i18n'
+import zh from './zh'
+import en from './en'
+
+const messages = {
+  en,
+  zh,
+}
+const language = (navigator.language || 'en').toLocaleLowerCase() // 这是获取浏览器的语言
+const i18n = createI18n({
+  legacy: false, // you must set `false`, to use Compostion API
+  locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
+  fallbackLocale: 'en', // 设置备用语言
+  messages, 
+})
+
+export default i18n
\ No newline at end of file

ktransformers/website/src/locals/zh.js

+// zh.js
+export default {
+    home: {
+        explore: '探索',
+        language: '选择语言',
+        english: '英语',
+        chinese: '中文',
+        today: '今天',
+        previous:'历史',
+        withoutAssistantTip:'本记录的KTransformers已被删除，用户只能查看历史对话信息而无法继续对话!',
+        deleteThreadTip:'删除记录会清除历史信息哦～'
+    },
+    chat:{
+        inputTip:"发送信息和 KTransformers 畅聊吧～",
+    },
+    explore:{
+        description: "基于Lexllama，一起来创建你的专属KTransformers吧~",
+        configuring: "配置中",
+        completed: "完成",
+        assistantName: "名称",
+        assistantDescription: "描述",
+        assistantStatus: "Status",
+        createAssistant: "创建新的KTransformers",
+        deleteAssistant: "是否确认删除KTransformers，删除KTransformers之后其KVCache也会被同步清理掉哦~",
+    },
+    config:{
+        title:'配置你的KTransformers',
+        fileTip:"仅支持上传文件格式为 .text, docx, .ppt, .pdf format.",
+        secletFile:'选择文件',
+        outOfSize:'文件大小超出10MB，请重新选择',
+        fileExist:'文件已存在，请重新选择',
+        createAssistant:'KTransformers创建成功，点击build按钮开始构建KVCache',
+    },
+    build:{
+        title:'构建日志',
+        step1:'解析上传文件',
+        parsingFileStep1:'文件上传接收完成',
+        parsingFileStep2:{
+            parse:"正在解析第",
+            file:"文件",
+            total:'共',
+        },
+        parsingFileStep3:'Prompt装载完毕，准备生成KVCache',
+        step2:'生成 KVCache',
+        generateStep1:'生成KVCache计算计划',
+        generateStep2:{
+            calculate:"正在计算",
+            token:"tokens",
+            total:'共',
+        },
+        generateStep3:'KVCache已生成完成',
+        durationTime:'持续时间：',
+        remainTime:'剩余时间：',
+        buildProgress:'构建进度',
+        storageUsage:'存储使用：',
+        
+    }
+}

ktransformers/website/src/main.ts

+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import VueApexCharts from "vue3-apexcharts"
+import i18n from '@/locals'
+
+const app = createApp(App)
+
+app.use(ElementPlus)
+
+app.use(i18n)
+app.use(VueApexCharts)
+app.use(store)
+app.use(router)
+app.mount('#app')