devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE3 + TypeScript 仿ChatGPT前端UI_vue3模仿gpt

作者：空白诗007 | 2024-07-31 03:50:45

赞

踩

vue3模仿gpt

基于html5 开发的仿ChatGPT的前端UI项目，采用了VUE3 + TypeScript等技术选型开发，实现了基本的消息会话、PDF会话、新增会话、删除会话、会话历史、Token统计等新增功能。

  • 消息会话、新建会话、会话历史、删除会话、Token统计、PDF文件上传等功能代码如下：
  1. <script setup lang='ts'>
  2.   import { ref } from 'vue'
  3.   import { useRoute } from 'vue-router'
  4.   import { router } from '@/router'
  5.   import { useScroll } from './hooks/useScroll'
  6.   import VuePdfApp from "vue3-pdf-app"
  7.   import "vue3-pdf-app/dist/icons/main.css"
  8.   import { encode } from 'gpt-tokenizer'
  9.  
  10.  
  11.   const { scrollRef, scrollToBottom } = useScroll()
  12.  
  13.   // Conversation and PDF preview panel toggle control
  14.   let showTab = ref<string>("nav-tab-chat")
  15.   let tabWidth = ref<string>("")
  16.  
  17.   // vue3-pdf-app UI configuration
  18.   let pdfFile = ref<string>("")
  19.   const config = ref<{}>({
  20.     sidebar: true,
  21.     toolbar: {
  22.       toolbarViewerLeft: {
  23.         findbar: true,
  24.         previous: true,
  25.         next: true,
  26.         pageNumber: false,
  27.       },
  28.       toolbarViewerRight: {
  29.         presentationMode: true,
  30.         openFile: false,
  31.         print: false,
  32.         download: false,
  33.         viewBookmark: false,
  34.       },
  35.       toolbarViewerMiddle: {
  36.         zoomOut: true,
  37.         zoomIn: true,
  38.         scaleSelectContainer: true,
  39.       }
  40.     },
  41.   })
  42.  
  43.   // Message input box
  44.   const prompt = ref<string>('')
  45.  
  46.   // Loading state and button state
  47.   const buttonDisabled = ref<boolean>(false)
  48.  
  49.   // Get uuid from URL params
  50.   const route = useRoute()
  51.   let { uuid } = route.params as { uuid: string }
  52.  
  53.   interface Conversation {
  54.     title: string;
  55.     uuid: string;
  56.     isEdit: boolean;
  57.     createDate: string;
  58.     lastChatContent: string;
  59.     active: boolean;
  60.   }
  61.  
  62.   interface Message {
  63.     send: {
  64.       model: string;
  65.       messages: {
  66.         role: string;
  67.         content: string;
  68.         fileName: any;
  69.         fileSize: number;
  70.       }[];
  71.       temperature: number;
  72.     };
  73.     loading: boolean;
  74.     receive?: {
  75.       model: string;
  76.       choices: {
  77.         message?: {
  78.           content: string;
  79.         };
  80.         delta: {
  81.           content: string;
  82.         };
  83.       }[];
  84.     };
  85.   }
  86.  
  87.   // Conversation list and message list
  88.   var conversationList = ref<Conversation[]>([])
  89.   var messageList = ref<Message[]>([]);
  90.   
  91.   let conversations = window.localStorage.getItem("chatStore")
  92.   if(conversations){
  93.     conversationList.value = JSON.parse(conversations)
  94.   }
  95.  
  96.   // Check if new conversation
  97.   if (!uuid || uuid === '0') {
  98.     uuid = Date.now().toString()
  99.  
  100.     // Initialize empty conversation
  101.     if(!conversations){
  102.       conversationList.value.push({
  103.         title: 'New Chat', 
  104.         uuid: uuid, 
  105.         isEdit: false, 
  106.         createDate: new Date().toLocaleString(), 
  107.         lastChatContent: 'Hello I am ChatGPT3.5...',
  108.         active: true
  109.       })
  110.     }else{
  111.       // If has history, get last conversation
  112.       let lastConversation = conversationList.value[conversationList.value.length-1]
  113.       uuid = lastConversation.uuid
  114.  
  115.       let messages = window.localStorage.getItem(uuid)
  116.       if(messages) {
  117.         messageList.value = JSON.parse(messages)
  118.       }
  119.  
  120.       router.push({ name: 'Chat', params: { uuid } })
  121.     }
  122.   }else{
  123.     // Load current conversation messages
  124.     let messages = window.localStorage.getItem(uuid)
  125.     if(messages) {
  126.       messageList.value = JSON.parse(messages)
  127.     }
  128.   
  129.     conversationList.value.forEach((item, index) => {
  130.       if(item.uuid == uuid){
  131.         item.active = true
  132.       }else{
  133.         item.active = false
  134.       }
  135.     })
  136.  
  137.     scrollToBottom()
  138.   }
  139.  
  140.   // Set active conversation
  141.   function handleAdd() {
  142.     // Reset the message record of the new conversation
  143.     messageList.value = []
  144.  
  145.     // Reset the active status of the conversation list
  146.     conversationList.value.forEach((item, index) => {
  147.       item.active = false
  148.     })
  149.  
  150.     // Initialize an empty conversation
  151.     uuid = Date.now().toString()
  152.  
  153.     conversationList.value.unshift({
  154.       title: "New Chat",
  155.       uuid: uuid,
  156.       isEdit: false,
  157.       createDate: new Date().toLocaleString(),
  158.       lastChatContent: 'Hello I am ChatGPT3.5...',
  159.       active: true
  160.     })
  161.  
  162.     // Save the conversation to local storage
  163.     window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
  164.   }
  165.  
  166.   // Menu toggle
  167.   function handleMenu(){
  168.     let rootbody = document.getElementById("rootbody")
  169.     if (rootbody) {
  170.       if(rootbody.classList.value==""){
  171.         rootbody.classList.value="open-sidebar-menu"
  172.       }else{
  173.         rootbody.classList.value=""
  174.       }
  175.     }
  176.   }
  177.  
  178.   // Switch conversation
  179.   function handleSwitch(selectedUuid: string) {
  180.     uuid = selectedUuid
  181.  
  182.     // Reset message record of the new conversation
  183.     let messages = window.localStorage.getItem(selectedUuid)
  184.     if(messages){
  185.       messageList.value = JSON.parse(messages)
  186.     }else{
  187.       messageList.value = []
  188.     }
  189.  
  190.     // Reset active status of the conversation list
  191.     conversationList.value.forEach((item, index) => {
  192.       if(item.uuid == selectedUuid){
  193.         item.active = true
  194.       }else{
  195.         item.active = false
  196.       }
  197.     })
  198.  
  199.     router.push({ name: 'Chat', params: { uuid } })
  200.   }
  201.  
  202.   // File upload related
  203.   var fileName = ref()
  204.   var fileSize = ref<number>(0)
  205.   var formattedFileSize = ref<string>('0B')
  206.   var fileUploadCard = ref<boolean>(false)
  207.  
  208.   var fileContent = ref()
  209.  
  210.   
  211.   // Handle file upload
  212.   function handleUpload(e: Event) {
  213.     const target = e.target as HTMLInputElement;
  214.     if(target.files && target.files[0].size >= 5 * 1024 * 1024){
  215.       alert('Maximum file size limit is 5MB')
  216.       return
  217.     }else if (!target.files || target.files.length === 0) {
  218.       alert('Please select a file')
  219.       return
  220.     }
  221.  
  222.     // Set file upload style
  223.     fileName.value = target.files[0].name
  224.     fileSize.value = target.files[0].size
  225.     formatFileSize()
  226.  
  227.     // Preview PDF
  228.     showTab.value = 'nav-tab-doc'
  229.     tabWidth.value = 'width: 60%'
  230.  
  231.     pdfFile.value = URL.createObjectURL(target.files[0])
  232.  
  233.     // Upload file and extract content
  234.     const formData = new FormData()
  235.     formData.append('doc', target.files[0])
  236.  
  237.     fetch(import.meta.env.VITE_API_UPLOAD, {
  238.       method: 'POST',
  239.       body: formData,
  240.     })
  241.     .then(response => response.text())
  242.     .catch(error => console.error('Error:', error))
  243.     .then(function (docContent) {
  244.       if (typeof docContent !== 'string') {
  245.         alert("Failed to extract file content")
  246.         return
  247.       }
  248.       
  249.       const tokens = encode(docContent)
  250.  
  251.       if(tokens.length > 4096){
  252.         alert("Exceeded maximum token limit of 4096")
  253.         fileName.value = ''
  254.         fileSize.value = 0
  255.         formattedFileSize.value = '0B'
  256.       }else{
  257.         // Set the extracted content
  258.         fileContent.value = docContent
  259.  
  260.         // Show file upload card
  261.         fileUploadCard.value = true
  262.       }
  263.     })
  264.   }
  265.  
  266.   function handleBackChat(){
  267.     showTab.value = 'nav-tab-chat'
  268.     tabWidth.value = ''
  269.   }
  270.  
  271.   function handleBackDoc(){
  272.     showTab.value = 'nav-tab-doc'
  273.     tabWidth.value = 'width: 40%'
  274.   }
  275.  
  276.   // Format file size in Bytes, KB, MB, GB
  277.   function formatFileSize() {
  278.     if (fileSize.value < 1024) {
  279.         formattedFileSize.value = fileSize.value + 'B';
  280.     } else if (fileSize.value < (1024*1024)) {
  281.         var temp = fileSize.value / 1024
  282.         formattedFileSize.value = temp.toFixed(2) + 'KB'
  283.     } else if (fileSize.value < (1024*1024*1024)) {
  284.         var temp = fileSize.value / (1024*1024)
  285.         formattedFileSize.value = temp.toFixed(2) + 'MB'
  286.     } else {
  287.         var temp = fileSize.value / (1024*1024*1024);
  288.         formattedFileSize.value = temp.toFixed(2) + 'GB'
  289.     }
  290.   }
  291.  
  292.   // Submit message
  293.   function handleSubmit() {
  294.     onConversation()
  295.   }
  296.  
  297.   // Stream request to ChatGPT3.5
  298.   async function onConversation() {
  299.     let message = prompt.value
  300.     if (!message || message.trim() === '')
  301.       return
  302.  
  303.     // Clear input box and disable button
  304.     prompt.value = ''
  305.     buttonDisabled.value = true
  306.     fileUploadCard.value = false
  307.  
  308.     // Send message (for local display, not directly sent to GPT)
  309.     messageList.value.push({
  310.       send: {
  311.         model: "gpt-3.5-turbo-1106",
  312.         messages: [
  313.           {
  314.             role: "user",
  315.             content: message,
  316.             fileName: fileName.value,
  317.             fileSize: fileSize.value,
  318.           },
  319.         ],
  320.         temperature: 0.7,
  321.       },
  322.       loading: true,
  323.     });
  324.  
  325.     scrollToBottom()
  326.  
  327.     // Stream request to ChatGPT3.5
  328.     try {
  329.       if(fileContent.value){
  330.         message += ', Uploaded file content: ' + fileContent.value
  331.       }
  332.  
  333.       let data = {
  334.         "model": "gpt-3.5-turbo-1106",
  335.         "messages": [{"role": "user", "content": message }],
  336.         "temperature": 0.7,
  337.         "stream": true
  338.       }
  339.  
  340.       let headers = {
  341.         'Content-Type': 'application/json',
  342.         'Authorization': 'Bearer ' + import.meta.env.VITE_API_KEY,
  343.       }
  344.  
  345.       // Send request
  346.       let response = await fetch(import.meta.env.VITE_APP_URL, {
  347.         method: 'POST',
  348.         headers: headers,
  349.         body: JSON.stringify(data)
  350.       })
  351.  
  352.       // Reset file upload related states immediately after sending to ChatGPT
  353.       fileName.value = ''
  354.       fileSize.value = 0
  355.       formattedFileSize.value = '0B'
  356.  
  357.       if (!response.ok) {
  358.         throw new Error('Network response was not ok')
  359.       }
  360.  
  361.       // Read the data returned from the stream
  362.       const reader = response.body?.getReader();
  363.  
  364.       const textDecoder = new TextDecoder()
  365.       let result = true
  366.       while (reader && result) {
  367.         // Get a chunk
  368.         const { done, value } = await reader.read()
  369.  
  370.         if (done) {
  371.           console.log('Stream ended')
  372.           result = false
  373.  
  374.           // Restore button state
  375.           buttonDisabled.value = false
  376.           fileContent.value = ''
  377.  
  378.           // Save current messages
  379.           window.localStorage.setItem(uuid, JSON.stringify(messageList.value))
  380.           window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
  381.           break
  382.         }
  383.  
  384.         // Convert chunk string to array
  385.         let chunkText = textDecoder.decode(value)
  386.         chunkText = chunkText.replace(/data:/g, '')
  387.         let results = chunkText.split('\n\n').filter(Boolean)
  388.  
  389.         // Iterate through the array and process multiple chunks
  390.         for (let i = 0; i < results.length; i++) {
  391.           var chunk = results[i]
  392.           if (chunk.indexOf('DONE') == -1) {
  393.             var chunkData = JSON.parse(chunk)
  394.             if (chunkData.choices[0].delta.content) {
  395.               if (!messageList.value[messageList.value.length - 1].receive) {
  396.                 // If it is the first result, set the state directly
  397.                 messageList.value[messageList.value.length - 1].receive = chunkData
  398.                 messageList.value[messageList.value.length - 1].loading = false
  399.               } else {
  400.                 const lastMessage = messageList.value[messageList.value.length - 1]?.receive;
  401.                 if (lastMessage && lastMessage.choices[0].delta.content) {
  402.                   lastMessage.choices[0].delta.content += chunkData.choices[0].delta.content;
  403.                 }
  404.               }
  405.               scrollToBottom()
  406.             }
  407.           }
  408.         }
  409.       }
  410.       } catch (e) {
  411.         console.log(e)
  412.       }
  413.     }
  414.  
  415.   function handleDele(selectedUuid: string){
  416.     // Reset the active state of the conversation list
  417.     conversationList.value.forEach((item, index) => {
  418.       if(item.uuid == selectedUuid){
  419.         conversationList.value.splice(index,1)
  420.  
  421.         // Save the conversation to local storage
  422.         window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
  423.         return false
  424.       }
  425.     })
  426.  
  427.     // Reset the message records of the new conversation
  428.     if(uuid == selectedUuid){
  429.       let messages = window.localStorage.getItem(selectedUuid)
  430.       if(messages){
  431.         window.localStorage.removeItem(selectedUuid)
  432.         messageList.value = []
  433.       }
  434.     }
  435.   }
  436.   </script>
  437.  
  438. <template>
  439.   <div id="layout" class="theme-cyan">
  440.       <!-- Sidebar -->
  441.       <div class="navigation navbar justify-content-center py-xl-4 py-md-3 py-0 px-3">
  442.         <a href="#" title="ChatGPT-UI" class="brand">
  443.           <svg class="logo" viewBox="0 0 128 128" width="24" height="24" data-v-c0161dce=""><path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-c0161dce=""></path><path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-c0161dce=""></path></svg>
  444.         </a>
  445.         <div class="nav flex-md-column nav-pills flex-grow-1" role="tablist" aria-orientation="vertical">
  446.           <a class="mb-xl-3 mb-md-2 nav-link active"  data-toggle="pill" href="#" role="tab">
  447.             <i class="zmdi zmdi-comment-alt"></i> <!-- Chat -->
  448.           </a>
  449.           <a class="mb-xl-3 mb-md-2 nav-link  d-none d-sm-block flex-grow-1" data-toggle="pill" href="#" role="tab">
  450.             <i class="zmdi zmdi-layers"></i> <!-- Layers -->
  451.           </a>
  452.  
  453.           <a class="mt-xl-3 mt-md-2 nav-link light-dark-toggle" href="#">
  454.             <i class="zmdi zmdi-brightness-2"></i> <!-- Light/Dark Mode -->
  455.             <input class="light-dark-btn" type="checkbox">
  456.           </a>
  457.           <a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" href="#" role="tab">
  458.             <i class="zmdi zmdi-settings"></i> <!-- Settings -->
  459.           </a>
  460.         </div>
  461.         <button type="submit" class="btn sidebar-toggle-btn shadow-sm" @click="handleMenu">
  462.           <i class="zmdi zmdi-menu"></i> <!-- Menu -->
  463.         </button>
  464.       </div>
  465.                   <!-- Sidebar -->
  466.                   <div class="sidebar border-end py-xl-4 py-3 px-xl-4 px-3" :style="tabWidth">
  467.                     <div class="tab-content">
  468.                       <!-- Chat Records -->
  469.                       <div class="tab-pane fade active show" id="nav-tab-chat" role="tabpanel" v-if="showTab === 'nav-tab-chat'">
  470.                         <div class="d-flex justify-content-between align-items-center mb-4">
  471.                           <h3 class="mb-0 text-primary">ChatGPT-UI</h3>
  472.                           <div>
  473.                             <button class="btn btn-dark" type="button"  @click="handleAdd">New Chat</button></div>
  474.                         </div>
  475.                         <ul class="chat-list">
  476.                           <li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
  477.                             <span>RECENT CHATS</span>
  478.                           </li>
  479.                           <li v-for="(item, index) in conversationList" :class="[item.active ? 'active' : '']" @click="handleSwitch(item.uuid)">
  480.                             <div class="hover_action">
  481.                               <button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
  482.                               <button type="button" class="btn btn-link text-danger" @click="handleDele(item.uuid)"><i class="zmdi zmdi-delete"></i></button>
  483.                             </div>
  484.                             <a href="#" class="card">
  485.                               <div class="card-body">
  486.                                 <div class="media">
  487.                                   <div class="avatar me-3">
  488.                                     <span class="status rounded-circle"></span>
  489.                                     <img class="avatar rounded-circle" :style="[item.active ? 'filter:grayscale(0)' : 'filter:grayscale(1)']" src="../assets/chatgpt.jpg" alt="avatar"></div>
  490.                                   <div class="media-body overflow-hidden">
  491.                                     <div class="d-flex align-items-center mb-1">
  492.                                       <h6 class="text-truncate mb-0 me-auto">{{ item.title }}</h6>
  493.                                       <p class="small text-muted text-nowrap ms-4 mb-0">{{ item.createDate }}</p></div>
  494.                                     <div class="text-truncate">{{ item.lastChatContent }}</div></div>
  495.                                 </div>
  496.                               </div>
  497.                             </a>
  498.                           </li>
  499.                         </ul>
  500.                       </div>
  501.                       <!-- end Chat Records -->
  502.                       <!-- PDF Preview -->
  503.                       <div class="tab-pane fade active show" id="nav-tab-doc" role="tabpanel" v-if="showTab === 'nav-tab-doc'">
  504.                         <div class="d-flex justify-content-between align-items-center mb-4">
  505.                           <h3 class="mb-0 text-primary">ChatGPT-PDF</h3>
  506.                           <div>
  507.                             <button class="btn btn-dark" type="button"  @click="handleBackChat">Back Chat</button></div>
  508.                         </div>
  509.                         <ul class="chat-list">
  510.                           <li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
  511.                             <span>PREVIEW</span>
  512.                           </li>
  513.                           <li>
  514.                             <vue-pdf-app style="height: 100vh;" :config="config" :pdf="pdfFile"></vue-pdf-app>
  515.                           </li>
  516.                         </ul>
  517.                       </div>
  518.                       <!-- end PDF Preview -->
  519.                     </div>
  520.                   </div>
  521.  
  522.                   <div class="main px-xl-5 px-lg-4 px-3">
  523.                     <div class="chat-body">
  524.                       <!-- Chat Box Header -->
  525.                       <div class="chat-header border-bottom py-xl-4 py-md-3 py-2">
  526.                         <div class="container-xxl">
  527.                           <div class="row align-items-center">
  528.                             <div class="col-6 col-xl-4">
  529.                               <div class="media">
  530.                                 <div class="me-3 show-user-detail">
  531.                                   <span class="status rounded-circle"></span>
  532.                                   <img class="avatar rounded-circle" src="../assets/chatgpt.jpg" alt="avatar"></div>
  533.                                 <div class="media-body overflow-hidden">
  534.                                   <div class="d-flex align-items-center mb-1">
  535.                                     <h6 class="text-truncate mb-0 me-auto">ChatGPT 3.5</h6></div>
  536.                                   <div class="text-truncate">Powered By OpenAI</div></div>
  537.                               </div>
  538.                             </div>
  539.                           </div>
  540.                         </div>
  541.                       </div>
  542.                        <!-- end Chat Box Header -->
  543.  
  544.                       <div class="chat-content" id="scrollRef" ref="scrollRef">
  545.                         <div class="container-xxl">
  546.                           <ul class="list-unstyled py-4" v-for="(item, index) of messageList">
  547.                             <!-- Right Message -->
  548.                             <li class="d-flex message right">
  549.                               <div class="message-body">
  550.                                 <span class="date-time text-muted"></span>
  551.                                 <div class="message-row d-flex align-items-center justify-content-end">
  552.                                   <div class="message-content border p-3">
  553.                                     {{ item.send.messages[0].content }}
  554.                                     <div class="attachment" v-show="item.send.messages[0].fileName" @click="handleBackDoc">
  555.                                       <div class="media mt-2">
  556.                                         <div class="avatar me-2">
  557.                                           <div class="avatar rounded no-image orange">
  558.                                             <i class="zmdi zmdi-collection-pdf"></i>
  559.                                           </div>
  560.                                         </div>
  561.                                         <div class="media-body overflow-hidden">
  562.                                             <h6 class="text-truncate mb-0">{{ item.send.messages[0].fileName }}</h6>
  563.                                             <span class="file-size">{{ item.send.messages[0].fileSize }}</span>
  564.                                         </div>
  565.                                       </div>
  566.                                     </div>
  567.                                   </div>
  568.                                 </div>
  569.                               </div>
  570.                             </li>
  571.                             <!-- end Right Message -->
  572.                             <!-- Left Message -->
  573.                             <li class="d-flex message" v-if="item.receive">
  574.                               <div class="mr-lg-3 me-2">
  575.                                 <img class="avatar sm rounded-circle" src="../assets/chatgpt.jpg" alt="avatar"></div>
  576.                               <div class="message-body">
  577.                                 <span class="date-time text-muted">{{ item.receive.model }}</span>
  578.                                 <div class="message-row d-flex align-items-center">
  579.                                   <div class="message-content p-3">
  580.                                     <v-md-preview :text="item.receive.choices[0].message?item.receive.choices[0].message.content:item.receive.choices[0].delta.content"></v-md-preview>
  581.                                   </div>
  582.                                 </div>
  583.                               </div>
  584.                             </li>
  585.                             <!-- end Left Message -->
  586.                             <!-- Loading Message -->
  587.                             <li class="d-flex message" v-if="item.loading">
  588.                               <div class="mr-lg-3 me-2">
  589.                                 <img class="avatar sm rounded-circle" src="../assets/chatgpt.jpg" alt="avatar"></div>
  590.                               <div class="message-body">
  591.                                 <div class="message-row d-flex align-items-center">
  592.                                   <div class="message-content p-3">
  593.                                     <div class="wave">
  594.                                       <span class="dot"></span>
  595.                                       <span class="dot"></span>
  596.                                       <span class="dot"></span>
  597.                                     </div>
  598.                                   </div>
  599.                                 </div>
  600.                               </div>
  601.                             </li>
  602.                             <!-- end Loading Message -->
  603.                           </ul>
  604.                         </div>
  605.                       </div>
  606.                       <!-- Message Input Box -->
  607.                       <div class="chat-footer border-top py-xl-4 py-lg-2 py-2">
  608.                         <div class="container-xxl">
  609.                           <div class="row">
  610.                             <div class="col-12">
  611.                               <form @submit.prevent="handleSubmit">
  612.                                 <div class="input-group align-items-center">
  613.                                   <input type="text" v-model="prompt" class="form-control border-0 pl-0" placeholder="Type your message...">
  614.                                   <div class="attachment" v-show="fileUploadCard" @click="handleBackDoc">
  615.                                     <div class="media mt-2">
  616.                                       <div class="avatar me-2">
  617.                                         <div class="avatar rounded no-image orange">
  618.                                           <i class="zmdi zmdi-collection-pdf"></i>
  619.                                         </div>
  620.                                       </div>
  621.                                       <div class="media-body overflow-hidden">
  622.                                         <h6 class="text-truncate mb-0">{{ fileName }}</h6>
  623.                                         <span class="file-size">{{ fileSize }}</span>
  624.                                       </div>
  625.                                     </div>
  626.                                   </div>
  627.                                   <div class="input-group-append">
  628.                                     <span class="input-group-text border-0">
  629.                                       <input type="file" accept="application/pdf" id="fileInput" ref="file" @change="handleUpload" style="display:none">
  630.                                       <button class="btn btn-sm btn-link text-muted" data-toggle="tooltip" @click="($refs.file as HTMLInputElement).click()" title="" type="button" data-original-title="Attachment">
  631.                                         <i class="zmdi zmdi-attachment font-22"></i>
  632.                                       </button>
  633.                                     </span>
  634.                                   </div>
  635.                                   <div class="input-group-append">
  636.                                     <span class="input-group-text border-0 pr-0">
  637.                                       <button type="submit" class="btn btn-primary" :disabled="buttonDisabled" @click="handleSubmit">
  638.                                         <i class="zmdi zmdi-mail-send"></i>
  639.                                       </button>
  640.                                     </span>
  641.                                   </div>
  642.                                 </div>
  643.                               </form>
  644.                             </div>
  645.                           </div>
  646.                         </div>
  647.                       </div>
  648.                        <!-- end Message Input Box -->
  649.                     </div>
  650.                   </div>
  651.                   <!-- Empty Page -->
  652.                   <div class="main px-xl-5 px-lg-4 px-3" style="display:none">
  653.                     <div class="chat-body">
  654.                     <div class="chat d-flex justify-content-center align-items-center h-100 text-center py-xl-4 py-md-3 py-2">
  655.                       <div class="container-xxl">
  656.                       <div class="avatar lg avatar-bg me-auto ms-auto mb-5">
  657.                         <img class="avatar lg rounded-circle border" src="../assets/user.png" alt="">
  658.                         <span class="a-bg-1"></span>
  659.                         <span class="a-bg-2"></span>
  660.                       </div>
  661.                       <h5 class="font-weight-bold">Hey, Robert!</h5>
  662.                       <p>Please select a chat to start messaging.</p>
  663.                       </div>
  664.                     </div>
  665.                     </div>
  666.                   </div>
  667.                   <!-- end Empty Page -->
  668.                 </div>
  669.             </template>
  • PDF会话、PDF预览、文件上传和附件信息等功能，功能代码如下：

  1.   // vue3-pdf-app 组件配置,预览PDF界面配置
  2.   let pdfFile = ref<string>("")
  3.   const config = ref<{}>({
  4.     sidebar: true,
  5.     toolbar: {  //工具条配置
  6.       toolbarViewerLeft: {
  7.         findbar: true, //查找功能
  8.         previous: true,//上一页
  9.         next: true,//下一页
  10.         pageNumber: false, //页号
  11.       },
  12.       toolbarViewerRight: { // 工具条右侧
  13.         presentationMode: true, 
  14.         openFile: false,
  15.         print: false,
  16.         download: false,
  17.         viewBookmark: false,
  18.       },
  19.       toolbarViewerMiddle: { //工具条中间位置 
  20.         zoomOut: true,
  21.         zoomIn: true,
  22.         scaleSelectContainer: true,
  23.       }
  24.     },
  25.   })
  1.  <ul class="chat-list">
  2.      <li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
  3.          <span>PREVIEW</span>
  4.      </li>
  5.      <li>
  6.          // PDF预览组件
  7.          <vue-pdf-app style="height: 100vh;" :config="config" :pdf="pdfFile"></vue-pdf-app>
  8.      </li>
  9.  </ul>

环境要求

开发版本： Node 18.15.0 + Vue 3

项目配置

ChatGPT UI的默认配置存储在“.env”文件中。您将需要覆盖一些值以使ChatGPT UI在本地运行。

  1. VITE_APP_URL = 填写OpenAI的API地址或第三方封装的API,格式示例：https://api.openai.com/v1/chat/completions
  2.  
  3. VITE_API_KEY= 填写OpenAI的ApiKey, 格式示例: sk-FihjnhGKO14eYLmPpV1234BlbkFJUq1lS0RNenkDsjgGLopx
  4.  
  5. VITE_API_UPLOAD = 填写解析pdf文件的API地址，格式示例: http://domain.com/upload/pdf

项目初始化

npm install

运行开发环境

npm run dev

访问项目

http://localhost:1003

构建生产环境

npm run build

下载地址

https://gitee.com/supertinys_ryan/chatgpt-ui

https://github.com/uniconnector/chatgpt-ui

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/906876
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号