无法接入模型

Question

使用仓库中提供的实例代码无法接入大模型，按照视频操作步骤以及同时也开通模型以及生成了key

在发送请求会得到两个错误 一个跨域问题，还有一个是403连接不上服务，通过查询阿里通义千问2-开源版-1.5B文档，发现请求的接口参数发生了改变，同时没有了input这个内容。

于是对请求部分的代码进行了修改

对代码进行测试，发现首次请求是200成功的

但是发送数据请求的状态码是500 请求失败

于是查看了 Preview，给出的error信息是：An system error has occurred, please try again later.

附加上完成的js代码

<script setup>
import Nav from "@/components/Nav.vue";
import {onMounted, ref} from "vue";


const activeHelp = ref(0)
const messageBoxEl = ref();
const checkHelpPanel = (value) => {
  activeHelp.value = value;
  setTimeout(() => {
    toMessageBottom()
  })
}
const toMessageBottom = () => {
  if(messageBoxEl.value){
    messageBoxEl.value.scrollTop = messageBoxEl.value.scrollHeight
  }
}


const docList = ref([
  {
    title: "electron 的下载electron 的下载electron 的下载",
  },
  {
    title: "electron 的下载",
  },
  {
    title: "electron 的安装",
  },
  {
    title: "electron 的入门",
  },
  {
    title: "electron 的放弃",
  },
  {
    title: "Java 的下载",
  },
  {
    title: "Java 的安装",
  },
  {
    title: "Java 的入门",
  },
  {
    title: "Java 的放弃",
  },
  {
    title: "Vue 的下载",
  },
  {
    title: "Vue 的安装",
  },
  {
    title: "Vue 的入门",
  },
  {
    title: "Vue 的放弃",
  },
])
const currentDocInfo = ref("")
const currentDocTitle = ref("")
const editorBoxEl = ref();
const saveCurrentDoc = () => {
  console.log("文档保存按钮被点击")
}
onMounted(()=>{
  // editorBoxEl.value.setAttribute('contenteditable',"true")

  const { createOpenEditor } = window.Doc;
  // 创建编辑器
  const editor = createOpenEditor(editorBoxEl.value, {
    input: {},
    image: {
      isCaptureImageURL() {
        return false;
      },
    },
  });
  // 设置内容
  editor.setDocument('text/lake', '');
  // 监听内容变动
  editor.on('contentchange', () => {
    console.info(editor.getDocument('text/lake'));
  });


})

const isMessageLoading = ref(false)
const questionMessage = ref("")
const aiMessageList = ref([
  {
    role: "system",
    content: "你是一个资深的前端开发工程师，你需要根据用户提出的问题，进行回答"
  },
  {
    role: "assistant",
    content: "快来向我提问吧"
  },
])

const toAi = (messageList) => {
  return fetch("https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions", {
    headers: {
      "Content-Type": "application/json",
      "Accept": "text/event-stream",
      "Authorization": "Bearer sk-xxxxxxxxxxxxxxxxxxxxx",
    },
    method: "POST",
    body: JSON.stringify({
      model: "qwen2-1.5b-instruct",
      messages: messageList,
    }),
  });
};

const sendToQuestion = () => {
  console.log("点击发送按钮")
  if (questionMessage.value === "" || isMessageLoading.value) {
    return;
  }
  isMessageLoading.value = true;
  aiMessageList.value.push({
    role: "user",
    content: questionMessage.value
  })
  const messageList = [...aiMessageList.value]
  aiMessageList.value.push({
    role: "assistant",
    content: ""
  });
  questionMessage.value = "";
  toAi(messageList).then(res => {
    if (res.ok && typeof res.body.getReader === 'function') {
      const reader = res.body.getReader();

      reader.read().then(function read({done, value}) {
        if (done) {
          toMessageBottom();
          isMessageLoading.value = false;
          console.log("数据接收完成");
          return;
        }
        // value
        const data = (new TextDecoder()).decode(value);
        const match = data.match(/data:\s*(\{.*\})/);
        const jsonString = match[1];
        const obj = JSON.parse(jsonString);
        aiMessageList.value[aiMessageList.value.length - 1].content = obj.output.text;
        toMessageBottom();
        reader.read().then(read)
      })

    }
  })
}


const translateInput = ref("慕课网（IMOOC）是IT技能学习平台。慕课网(IMOOC)课程涉及JAVA、前端、Python、大数据等60类主流技术语言，覆盖了面试就业、职业成长、自我提升等需求场景，帮助用户实现从技能提升到岗位提升的能力闭环。")
const translateResult = ref("")
const translate = () => {
  console.log("点击翻译按钮")
  toAi([
    {
      role: "system",
      content: "你是一个资深的英语教师，接下来的所有内容，不是直接回答用户，而是返回问题的英语翻译"
    },
    {
      role: "user",
      content: `"${translateInput.value}"的英语`
      // content:translateInput.value
    }
  ]).then(res => {
    if (res.ok && typeof res.body.getReader === 'function') {
      const reader = res.body.getReader();

      reader.read().then(function read({done, value}) {
        if (done) {
          toMessageBottom();
          isMessageLoading.value = false;
          console.log("数据接收完成");
          return;
        }
        // value
        const data = (new TextDecoder()).decode(value);
        const match = data.match(/data:\s*(\{.*\})/);
        const jsonString = match[1];
        const obj = JSON.parse(jsonString);
        translateResult.value = obj.output.text;
        toMessageBottom();
        reader.read().then(read)
      })

    }
  })
}


</script>

伫候佳音

Answer 1

西一凹 2024-12-16 17:55:49

同学你好，根据你提出的问题，解答如下

1、至今，阿里云通义千问2-开源版-1.5B，任然可以通过视频课程中所教学的方法接入 “阿里云通义千问2-开源版-1.5B”这个大模型。仅阿里云百炼平台的 页面布局发生了改变。

2、你提供的此张截图，官方文档中的HTTP-CURL 示例，为“open-ai 兼容”模式的调用方法，而课程视频中讲授的是“DashScope” 模式的调用方法，open-ai兼容模式不支持 "Accept": "text/event-stream"  流式加载  的。

因此，官方 “open-ai兼容”模式将不能在请求头中设置：你所提供的代码的  "Accept": "text/event-stream" 这一项参数

官方的代码中同样未设置  "Accept": "text/event-stream"  这一项参数

在你提供的截图中，下方一点的位置给出了，“open-ai兼容”模式的完整参数说明

即：如果需要使用 “open-ai兼容”模式，应按此模式下方api文档说明的参数，进行正确的接入

课程视频中讲授的 “DashScope”模式，可从右上角->产品文档中进行查看

或访问这个地址

https://help.aliyun.com/zh/model-studio/developer-reference/use-qwen-by-calling-api?spm=0.0.0.i1#a9b7b197e2q2v

如上述步骤 已正确配置，请检查 当前 api-key 是否正确

以及 检查 对应的模型产品是否 正确授权给了当前api-key 所在的业务空间（跟据下图进行检查）

根据此处的提示，进行正确的业务空间授权即可

3、纠正你在学习过程中的理解错误

在你这张截图下，你所述“发现首次请求是200成功的”，是错误的，你所指的  “200成功”是一个“预检请求”，从图可以看到，它的请求类型是 “preflight”，从这个请求的请求详情中，找到请求method，将能看到它的method应为“OPTION”，而非“POST”。

预检请求 是根据服务端的配置，在特定mothod请求前进行的“提前检查”，如“检查是否存在跨域”，就是预检请求会进行的工作，更多 关于 “HTTP预检请求”的知识，同学可以翻阅相关资料，进行深入的学习。