1.PPT辅导:
这个功能逻辑比较简单主要就是前端将input中输入的内容发送给后端,后端调用ai并返回ai的话,因此前后端连接前端代码如下:
import axios from 'axios';
export default {
data() {
return {
userInput: '',
messages: [],
messageId: 0
};
},
methods: {
async sendMessage() {
if (this.userInput.trim() === '') return;
const userMessage = {
id: this.messageId++,
text: this.userInput,
type: 'user'
};
this.messages.push(userMessage);
try {
const response = await axios.post('http://localhost:8080/teach/async', this.userInput, {
headers: {
'Content-Type': 'text/plain'
}
});
const aiMessage = {
id: this.messageId++,
text: response.data,
type: 'ai'
};
this.messages.push(aiMessage);
} catch (error) {
console.error('Error sending message:', error);
}
this.userInput = '';
}
}
};
2.PPT评价:
此功能跟PPT辅导比较类似,即上传PPT,前端分页提取PPT中的内容并将内容返回给后端,后端调用ai对上传的PPT进行评价并给出修改意见,返回给前端。
前端代码如下:
分页提取PPT:
readFile(file) {
const reader = new FileReader();
reader.onload = async (e) => {
const arrayBuffer = e.target.result;
try {
let pptData = await parse(arrayBuffer);
console.log(pptData);
var allText = [];
console.log(Array.isArray(pptData));
//pptData=JSON.parse(pptData);
for(let si in pptData){
console.log(si);
}
pptData.slides.forEach((slide) => {
console.log("yyy");
console.log(slide.elements.content);
if (slide.elements) {
slide.elements.forEach(text => {
console.log("msy");
var processcontent=text.content.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');
allText.push(processcontent);
});
}
});
// 分页处理
const pageSize = 1000; // 每页字符数
const pages = [];
for (let i = 0; i < allText.length; i += pageSize) {
pages.push(allText.slice(i).join(' '));
}
// 逐页发送到后端
pages.forEach((pageContent, index) => {
this.sendMessage(pageContent, `${file.name}-page-${index + 1}`);
});
}catch(err) {
console.error('PPT解析失败:', err);
}
};
reader.onerror = (e) => {
console.error("File reading error:", e);
};
reader.readAsArrayBuffer(file);
},
前后端连接:
async sendMessage(content = this.userInput,fileName='') {
if (content.trim() === '') return;
const userMessage = {
id: this.messageId++,
text: content,
type: 'user'
};
this.messages.push(userMessage);
try {
const response = await axios.post('http://localhost:8080/chat/async', {content,fileName}, {
headers: {
'Content-Type': 'application/json'
}
});
const aiMessage = {
id: this.messageId++,
text: response.data,
type: 'ai'
};
this.messages.push(aiMessage);
console.log(aiMessage);
} catch (error) {
console.error('Error sending message:', error);
}
this.userInput = '';
}
页面效果: