使用 ElevenLabs、Streamlit 和 Claude 构建简单的单词拼写应用程序

你知道生成声音的能力是什么吗？它们开启了哪些巨大的可能性，有多少领域可以从中受益？

也许您需要一个应用程序来为视频博客或书籍配音。也许您想通过专业的配音让游戏角色栩栩如生。创建一个学习外语的应用程序怎么样？

今天， lablab.ai为您准备了教程，帮助您更好地了解AI语音技术！让我们深入了解吧！

介绍

随着市场上各种“生成式人工智能”工具的出现，这是软件开发最激动人心的时代之一。就说它吧，求职信生成？查看！电子邮件生成？查看！自动生成代码注释？查看！即使在编码和软件开发之外，用例的可能性也是巨大的。

现在，我们可以使用各种图像生成模型来生成带有文本提示的图像。因此，它使我们能够将生成的资产合并到我们的各种产品中。下一个问题是：声音怎么样？过去几年的用户体验趋势提到“语音命令”是新兴趋势之一。

我们构建的软件将语音作为功能之一是很自然的。这就是为什么在本教程中，我们将在一个简单的应用程序中展示ElevenLabs提供的“语音合成”功能，该功能会生成随机单词并拼写它。为了为这个基于 Python 的应用程序构建 UI，我们将使用Streamlit ，这是一个用于共享数据科学项目的新 UI 库。

十一实验室简介

ElevenLabs是一家提供语音合成解决方案的语音技术研究公司。凭借易于使用的API ，它允许开发人员使用AI生成高质量的演讲。这是通过人工智能模型实现的，该模型已经过大量有声读物和播客的训练。通过训练，人工智能能够在语音生成方面提供可预测的高质量结果。

ElevenLabs必须提供两个主要功能，第一个是 VoiceLab，用户可以从录制的音频和/或现有的预制声音中克隆声音，还可以根据性别、年龄、民族和种族“设计”声音。一旦用户有了可以使用的声音，他们就可以继续使用下一个功能，即语音合成，他们可以使用自己设计的声音或仅使用预制的声音来生成语音。

Anthropic 的克劳德模型简介

Claude是人工智能研究组织Anthropic开发的最新人工智能模型，该组织专注于提高人工智能系统的互操作性、鲁棒性和安全性。

克劳德模型旨在生成类似人类的响应，使其成为从内容创建、法律到客户服务等广泛应用的强大工具。就像市场上的任何其他人工智能模型一样，克劳德也接受过各种互联网文本的训练。然而，与大多数人工智能模型不同的是，它专注于“安全”，这使得拒绝它认为对用户“有害”或“不真实”的输出成为可能。

Streamlit简介

Streamlit是一个开源Python库，使开发人员和数据科学家能够轻松创建和共享具有视觉吸引力的定制 Web 应用程序。开发人员可以使用Streamlit在几分钟内构建和部署功能齐全的数据科学应用程序。它是通过简单直观的 API 实现的，可用于将数据脚本转换为 UI 组件。

先决条件

• Python和使用Streamlit进行UI 开发的基础知识
• 访问Anthropic API
• 访问ElevenLabs API

大纲

1. 初始化我们的Streamlit 项目
2. 使用Claude模型添加单词生成功能
3. 使用ElevenLabs API添加语音生成功能
4. 测试单词生成器应用程序

讨论

在本教程中我们将至少完成四个步骤。首先，我们需要初始化基于 Streamlit 的项目，以获得使用 Streamlit 开发用户界面的总体感觉。

接下来，我们开始添加更多功能，从工程提示开始，让Claude模型为我们提供一个经常拼写错误的随机单词。之后，我们将添加ElevenLabs提供的文本到语音生成功能，以演示多语言模型如何拼写单词。最后，我们将测试这个简单的应用程序。

初始化我们的 Streamlit 项目

让我们开始编码操作吧！首先我们为我们的项目建立一个目录并进入！

 mkdir randomwords cd randomwords

接下来，我们将使用此目录作为Streamlit项目的基础。因为Streamlit项目本质上是一个Python项目，所以我们需要执行一些步骤来初始化我们的Python项目，例如定义和激活我们的虚拟环境。

 # Creating the virtual environment python -m venv env # Activate the virtual environment # On Linux/Mac source env/bin/activate # On Windows: .\env\Scripts\activate

激活后，终端的输出应显示虚拟环境 (env) 的名称，如下所示：

接下来，是时候安装这个项目所需的库了！让我们使用pip命令来安装streamlit 、 anthropic和elevenlabs库。请注意，我们还安装了版本锁定的pydantic库，以防止elevenlabs函数之一中出现与 Pydantic 相关的错误。

 pip install streamlit anthropic elevenlabs "pydantic==1.*"

项目的所有需求都已解决，现在让我们深入研究编码部分！在我们的项目目录中创建一个新文件，我们将其命名为randomwords_app.py 。

 touch randomwords_app.py

创建文件后，让我们在我们最喜欢的代码编辑器或集成开发环境 (IDE) 中打开该文件。对于初学者来说，让我们从最简单的部分（标题和说明文字）构建我们的简单应用程序！

 import streamlit as st st.title("Random Words Generator") st.text("Hello, this is a random words generator app")

为了结束我们的项目初始化部分，让我们尝试测试运行该应用程序。确保我们当前的工作目录仍在我们的项目中，并且我们的虚拟环境已经激活。一切准备就绪后，使用streamlit run <app-name>运行应用程序。

 streamlit run randomwords_app.py

该应用程序应该会在我们的默认浏览器中自动打开！它现在应该显示标题和文本。接下来，我们将使用Anthropic 的 Claude模型添加随机单词生成功能。

最后一件事是，我们必须为我们的应用程序提供我们将要使用的服务的 API 密钥，即Anthropic 的 Claude模型和ElevenLabs 的语音合成功能。由于这些钥匙被认为是敏感的，我们应该将它们保存在安全且隔离的地方。

但是，这次我们不将它们存储在.env文件中。这是因为 Streamlit 以不同的方式处理环境变量。根据文档，我们需要在.streamlit目录中创建一个秘密配置文件。我们可以在项目中创建目录，然后创建文件。

 mkdir .streamlit touch .streamlit/secrets.toml

让我们编辑我们创建的 TOML 文件，请注意 TOML 文件使用与通常的.env文件不同的格式。

 xi_api_key = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" claude_key = "sk-ant-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

使用Claude 模型添加单词生成功能

在此步骤中，我们将添加一个用于生成随机单词的按钮、用于显示生成单词的标题元素和用于显示单词含义的副标题。然而，来自 webdev 的背景，我坚信 UI 元素应该放置和排列在容器内。所以，我们就这么做。

导入必要的库

首先，让我们添加一些导入语句。我们将导入anthropic库来生成随机单词。

 import streamlit as st import anthropic

然后，在讨论 UI 部分之前，我们首先创建单词生成函数。

定义单词生成函数

def generate_word(): prompt = (f"{anthropic.HUMAN_PROMPT} Give me one non-English word that's commonly misspelled and the meaning. Please strictly follow the format! example: Word: Schadenfreude; Meaning: joy at other's expenses." f"{anthropic.AI_PROMPT} Word: Karaoke; Meaning: a form of entertainment where people sing popular songs over pre-recorded backing tracks." f"{anthropic.HUMAN_PROMPT} Great! just like that. Remember, only respond following the pattern.") c = anthropic.Anthropic(api_key=st.secrets["claude_key"]) resp = c.completions.create( prompt=f"{prompt} {anthropic.AI_PROMPT}", stop_sequences=[anthropic.HUMAN_PROMPT], model="claude-v1.3-100k", max_tokens_to_sample=900, ) print(resp.completion) return resp.completion

在这个函数中，最繁重的工作是由 ** Anthropic 的 Claude 模式**l 完成的（谢谢， Claude ！😉）。然而，我们在这个函数中的部分是如何让 Claude 一致地返回精确的格式。因此，我们需要指示Claude “严格遵循格式”，并在我们最初的提示后添加它来给出示例响应。

最后，我们通过要求 Claude“记住仅按照模式进行响应”来确保 Claude 遵守我们的协议。该函数以返回Claude的响应结束。

接下来，让我们继续编辑 UI！

更新用户界面

st.title("Random Words Generator") with st.container(): st.header("Random Word") random_word = st.subheader("-") word_meaning = st.text("Meaning: -") st.write("Click the `Generate` button to generate new word") if st.button("Generate"): result = generate_word() # Split the string on the semicolon split_string = result.split(";") # Split the first part on ": " to get the word word = split_string[0].split(": ")[1] # Split the second part on ": " to get the meaning meaning = split_string[1].split(": ")[1] print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}")

这次，我们添加了一个容器，里面有一些元素。标题、用于显示随机单词的副标题以及用于显示单词含义的文本元素。我们还有一个文本来显示如何使用该应用程序的提示，以及它下面的一个按钮。

在Streamlit中，我们可以使用条件语句来声明单击事件处理程序，当单击按钮时它返回True 。在此代码中，我们调用generate_word()函数，该函数返回生成的单词和含义，并将结果分别拆分为单词和含义的单独变量。最后，我们更新副标题和文本元素以显示单词和含义。

最终形式

让我们再次仔细检查我们的代码！它应该包含导入语句、用于生成随机单词的函数、以及包含子标题、文本元素以及通过调用generate_word()函数生成单词的按钮的更新UI。

 import streamlit as st import anthropic def generate_word(): prompt = (f"{anthropic.HUMAN_PROMPT} Give me one non-English word that's commonly misspelled and the meaning. Please strictly follow the format! example: Word: Schadenfreude; Meaning: joy at other's expenses." f"{anthropic.AI_PROMPT} Word: Karaoke; Meaning: a form of entertainment where people sing popular songs over pre-recorded backing tracks." f"{anthropic.HUMAN_PROMPT} Great! just like that. Remember, only respond following the pattern.") c = anthropic.Anthropic(api_key=st.secrets["claude_key"]) resp = c.completions.create( prompt=f"{prompt} {anthropic.AI_PROMPT}", stop_sequences=[anthropic.HUMAN_PROMPT], model="claude-v1.3-100k", max_tokens_to_sample=900, ) print(resp.completion) return resp.completion st.title("Random Words Generator") with st.container(): st.header("Random Word") random_word = st.subheader("-") word_meaning = st.text("Meaning: -") st.write("Click the `Generate` button to generate new word") if st.button("Generate"): result = generate_word() # Split the string on the semicolon split_string = result.split(";") # Split the first part on ": " to get the word word = split_string[0].split(": ")[1] # Split the second part on ": " to get the meaning meaning = split_string[1].split(": ")[1] print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}")

测试单词生成功能

让我们使用相同的命令再次运行该应用程序。如果我们之前运行过应用程序，我们也可以通过单击右上角的菜单重新运行应用程序，然后单击“重新运行”。

它应该显示这个更新的用户界面。

现在，让我们尝试单击Generate按钮！

Streamlit 的优点之一是它可以处理加载并提供开箱即用的加载指示器。我们应该看到右上角的指示器，以及“停止”操作的选项。整洁吧？

几秒钟后，结果应显示在 UI 中。

完美的！请注意，应用程序正确地将Claude模型生成的文本拆分为单词和含义。但是，如果结果不符合预期格式，我们可以随时再次单击Generate按钮。

下一步是该应用程序的主要功能，将语音生成合并到我们的随机单词生成器中。除了演示如何使用ElevenLabs提供的API生成音频文件外，这一步还可以演示ElevenLabs的多语言模型的功能。

使用ElevenLabs API 添加语音生成功能

正如您可能已经猜到的那样，本节的第一步是添加更多导入语句！因此，让我们添加elevenlabs中的一些函数，用于语音生成功能。

 import streamlit as st import anthropic ++ from elevenlabs import generate, set_api_key

接下来，我们将定义处理语音生成的函数。

 def generate_speech(word): set_api_key(st.secrets['xi_api_key']) audio = generate( text=word, voice="Bella", model='eleven_multilingual_v1' ) return audio

得益于Python的简单性和可读性，以及ElevenLabs易于使用的API，我们可以仅使用这段代码来生成语音！该函数接受我们用来生成语音的随机单词。我们还特别使用“eleven_multilingual_v1”模型，这是一个多语言模型，非常适合我们的用例来演示外语和常见拼写错误单词的拼写和发音！最后，我们在本教程中使用“ Bella ”语音，这是ElevenLabs提供的预制语音之一。

接下来，我们将添加一个音频播放器来播放生成的语音。

 print(f"word result: {word}") random_word.subheader(word) word_meaning.text(f"Meaning: {meaning}") ++ speech = generate_speech(word) ++ st.audio(speech, format='audio/mpeg')

在我们之前的最新代码下方，我们添加了变量来存储生成的语音，并使用 Streamlit 的st.audio函数提供的音频播放器运行语音。此时，我们的应用程序应该按预期工作，仅在有随机单词可供“阅读”时才显示音频播放器。

好奇它是如何运作的？我也是！现在让我们测试一下该应用程序！

测试单词拼写功能

让我们使用streamlit run再次运行该应用程序，或者如果我们已经运行该应用程序，则重新运行该应用程序。它看起来应该和我们上次离开时一模一样。不过，这次我们尝试单击“生成”按钮！

惊人的！这次，该应用程序还显示了一个音频播放器！我们来尝试玩一下吧。使用多语言模型，生成的语音应使用接近单词的源语言的口音和语调。例如，“entrepreneur”应该用法语口音发音。

结论

在这个简短的教程中，希望我们已经探索了ElevenLabs提供的语音生成技术的功能。通过多语言模型，可以轻松生成针对非英语听众的语音。在我们的用例中，我们需要多语言模型来帮助我们找到正确的方法来发音和拼写经常拼写错误的非英语单词。

这么多创意，诚邀开发者加入，共创未来！

7 月 28 日， lablab.ai 发起挑战，您可以使用ElevenLabs模型创建自己的语音 AI 应用程序！ （此外，您可以利用其他人工智能模型，例如大型语言模型、图像和视频生成模型等，只要它们不与黑客马拉松技术直接竞争）。

*Your final submission should consist of a ready-to-play working prototype of your idea, a video pitch, and a presentation showcasing your solution.

您可以在此处找到更多教程，并且可以加入其他黑客马拉松来使用尖端技术进行构建！

非常感谢本文的作者Septian Adi Nugraha 。 💚