文章目录react native(学习笔记第四课) 英语打卡微应用3-图片转化成语音文件1. 文字到语音的转换AI (Text To Speech TTS )1.1 AI的采用选择1.2 全体代码1.2.1 主要TTS的类1.2.2 pytest进行提前测试1.2.3 最后进行结合到backend的真正代码中1.2.4 修改的代码汇总2. 构建基础TTS类3. 创建pytest代码并执行3.1 创建pytest代码3.2 执行pytest代码4. 在backend中调用TTS类进行语音生成4.1 修改backend中的代码4.2 执行手机应用进行测试5. 接下来的工作react native(学习笔记第四课) 英语打卡微应用3-图片转化成语音文件文字到语音的转换AI(Text To Speech TTS)构建基础TTS类创建pytest代码在backend中调用TTS类进行语音生成接下来的工作1. 文字到语音的转换AI(Text To Speech TTS)TTS是Text To Speech的缩写即“从文本到语音”是人机对话的一部分让机器能够说话。TTS技术对文本文件进行实时转换转换时间之短可以秒计算速度非常快。1.1AI的采用选择因为上一个阶段使用了智谱AI进行了图片到文字的OCR抽取为了保持LLM的单一选择是程序更加简单。继续选择使用智谱AI。看到智谱AI的平台上提供了TTS的AI服务正好可以使用。这里可以充值10元可以使用好长时间在测试阶段还是没有问题的。在下面这里可以查看API的使用方法。文本转语音API1.2 全体代码全体代码介绍一下在这个阶段的主要改修和做成的代码。1.2.1 主要TTS的类TTS类主要功能接受HumanMessage或者纯文本的文本输入。调用智谱AI的glm-tts进行文本到语音的输出。将结果保存到wav文件中。1.2.2pytest进行提前测试pytest代码主要功能从sample文本文件中提取文本。在pytest代码中调用TTS类。1.2.3 最后进行结合到backend的真正代码中结合代码1.2.4 修改的代码汇总红色的地方是做成的代码部分蓝色部分是backend的代码进行调用TTS类的地方。2. 构建基础TTS类这里很简单就是使用通常的request类进行https的请求进行TTS转换。importosimportuuidimportrequestsimportwaveimportiofromdotenvimportload_dotenvfromlangchain_core.runnablesimportRunnableLambda load_dotenv()classGLMTTS:def__init__(self):self.api_keyos.getenv(ZHIPU_AI_API_KEY)self.base_urlos.getenv(GLM_TTS_BASE_URL,https://open.bigmodel.cn/api/paas/v4/audio/speech)self.output_diros.getenv(TTS_OUTPUT_DIR,./tts_output)# speech max lengthself.speech_max_lengthint(os.getenv(SPEECH_MAX_LENGTH,999))os.makedirs(self.output_dir,exist_okTrue)def_extract_text(self,messages)-str:从 LangChain message 结构中提取纯文本fromlangchain_core.messagesimportHumanMessageifnotisinstance(messages,list):returnstr(messages)texts[]forminmessages:ifisinstance(m,HumanMessage):texts.append(m.content)elifisinstance(m,tuple)andm[0]human:texts.append(m[1])else:texts.append(str(m))# if length is over max length, the cut into max lengthtextstexts[:self.speech_max_length]return\n.join(texts).strip()defgenerate_speech(self,messages)-str: 输入: LangChain message / 文本 输出: 保存后的 WAV 文件路径 textself._extract_text(messages)print(ftext:{text})headers{Authorization:fBearer{self.api_key},Content-Type:application/json}payload{model:glm-tts,input:text,voice:male,stream:False,response_format:wav}resprequests.post(self.base_url,headersheaders,jsonpayload)resp.raise_for_status()wav_bytesresp.content filenamef{uuid.uuid4().hex}.wavfile_pathos.path.join(self.output_dir,filename)withopen(file_path,wb)asf:f.write(wav_bytes)returnfile_path# ✅ LangChain Runnable 兼容接口defas_runnable(self):returnRunnableLambda(self.generate_speech)注意这里通过dotenv定义了SPEECH_MAX_LENGTH为999之后暂时将超过999文字的截取到999文字内。因为通过测试看出智谱AI的glm-tts这里如果超过1000文字就会出错所以暂时先这样对应了一下。以后将考虑将文章进行每1000的分割调用。3. 创建pytest代码并执行3.1 创建pytest代码这里如果直接和backend的代码那么调式起来还需要手机react native应用的启动进行图片的扫描与AI的ocr解析在这之前使用pytest进行类似于单体测试。注意这里规范pytest的路径和正式代码的根目录\app的同级建立目录\tests\tests的子路径也是测试的目标代码同样建立\tests\ai\tts创建pytest的文件test_glm_test.py# tests/test_glm_tts.pyimportsysfrompathlibimportPathfromapp.ai.tts.glm_ttsimportGLMTTSdeftest_glm_tts_001():withopen(tests\\resources\\speech.txt,r,encodingutf-8)asf:linesf.readlines()content.join(lines)contentcontent[:999]print(flen:{len(content)})ttsGLMTTS()wav_pathtts.generate_speech(content)assert(len(wav_path)0)这里需要注意两点需要设定pytest.ini文件让root path设定到app和tests的父目录以便pytest的测试代码能够找到app下的backend测试类制品代码。另外在这里准备好测试的文本文件tests/resources/speech.txt在pytest中使用这个文本文件。3.2 执行pytest代码这里因为需要执行pytest实现安装pytest。pipinstallpytest之后可以将venv里面上安装的python包提出到requirements.txt中那么执行下面命令。pip freezerequirements.txt接下来执行pytest的代码。pytest .\tests\ai\tts\test_glm_tts.py之后进行结果的检查。注意这里将dotenv里面定义了wav文件的输出路径。检查输出路径可以看到已经生成了文件(文件名字是UUID)。可以听听转换成的语音文件。4. 在backend中调用TTS类进行语音生成4.1 修改backend中的代码fromlangchain_core.messagesimportHumanMessagefromapp.ai.ttsimportGLMTTSclassOCRService:asyncdefextract_text(self,base64_url)-str: 从图片字节数据中提取文字 try:# 在线程池中运行CPU密集型的OCR任务# 这样可以避免阻塞FastAPI的异步事件循环loopasyncio.get_event_loop()# 执行OCRanalyzercreate_image_analyzer()resultanalyzer(base64_url)# 将执行结果送给AI转换成wav文件messages[HumanMessage(contentresult),]ttsGLMTTS()wav_pathtts.generate_speech(messages)print(生成音频路径:,wav_path)returnresultexceptExceptionase:logger.error(f文字提取失败:{str(e)},exc_infoTrue)# exc_infoTrue 会记录完整的堆栈跟踪raiseException(fOCR处理失败:{str(e)})4.2 执行手机应用进行测试这时候点击识别文字的按钮就会看到经过了一会的处理backend的本地路径dotenv定义TTS_OUTPUT_DIRC:\\Users\\Dell\\workspace上会出现生成的语音文件。到此实现了下面功能手机的react native的应用进行拍照传递到backendbackend调用大模型实现图片到文本文件的ocr抽取文本到语音的转换5. 接下来的工作将文本以及生成的wav的bytes进行数据库的保存之后实现react native手机应用上对数据库里面的数据进行list表示。