mirror of
https://github.com/hwchase17/langchain.git
synced 2025-06-20 13:54:48 +00:00
docs: dropdowns for embeddings and vector stores (#28713)
This commit is contained in:
ccurme
GitHub
parent
498f0249e2
commit
9c55c75eb5
@ -51,8 +51,6 @@
|
||||
"\n",
|
||||
"We will need to select three components from LangChain's suite of integrations.\n",
|
||||
"\n",
|
||||
"A [chat model](/docs/integrations/chat/):\n",
|
||||
"\n",
|
||||
"import ChatModelTabs from \"@theme/ChatModelTabs\";\n",
|
||||
"\n",
|
||||
"<ChatModelTabs customVarName=\"llm\" />"
|
||||
@ -78,8 +76,6 @@
|
||||
"id": "da14773e-ac98-4a97-944b-4c6ec028d195",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"An [embedding model](/docs/integrations/text_embedding/):\n",
|
||||
"\n",
|
||||
"import EmbeddingTabs from \"@theme/EmbeddingTabs\";\n",
|
||||
"\n",
|
||||
"<EmbeddingTabs/>"
|
||||
@ -105,8 +101,6 @@
|
||||
"id": "22fdc314-b91d-4820-b0a8-873b5b6e76f5",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"And a [vector store](/docs/integrations/vectorstores/):\n",
|
||||
"\n",
|
||||
"import VectorStoreTabs from \"@theme/VectorStoreTabs\";\n",
|
||||
"\n",
|
||||
"<VectorStoreTabs/>"
|
||||
|
||||
@ -122,8 +122,6 @@
|
||||
"\n",
|
||||
"We will need to select three components from LangChain's suite of integrations.\n",
|
||||
"\n",
|
||||
"A [chat model](/docs/integrations/chat/):\n",
|
||||
"\n",
|
||||
"import ChatModelTabs from \"@theme/ChatModelTabs\";\n",
|
||||
"\n",
|
||||
"<ChatModelTabs customVarName=\"llm\" />"
|
||||
@ -149,8 +147,6 @@
|
||||
"id": "f1b78672-f21e-4827-843e-59514d18ca20",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"An [embedding model](/docs/integrations/text_embedding/):\n",
|
||||
"\n",
|
||||
"import EmbeddingTabs from \"@theme/EmbeddingTabs\";\n",
|
||||
"\n",
|
||||
"<EmbeddingTabs/>"
|
||||
@ -176,8 +172,6 @@
|
||||
"id": "859ffca8-055e-4f5a-95fe-55906ed1d63f",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"And a [vector store](/docs/integrations/vectorstores/):\n",
|
||||
"\n",
|
||||
"import VectorStoreTabs from \"@theme/VectorStoreTabs\";\n",
|
||||
"\n",
|
||||
"<VectorStoreTabs/>"
|
||||
|
||||
@ -3,7 +3,7 @@ import React, { useState } from "react";
|
||||
import CodeBlock from "@theme-original/CodeBlock";
|
||||
|
||||
// Create a custom dropdown since Docusaurus's dropdown component isn't easily accessible
|
||||
const CustomDropdown = ({ selectedOption, options, onSelect }) => {
|
||||
export const CustomDropdown = ({ selectedOption, options, onSelect, modelType }) => {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
@ -18,13 +18,29 @@ const CustomDropdown = ({ selectedOption, options, onSelect }) => {
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}, [isOpen]);
|
||||
|
||||
// Determine the text and link based on the modelType
|
||||
const getModelTextAndLink = () => {
|
||||
switch (modelType) {
|
||||
case 'chat':
|
||||
return { text: 'chat model', link: '/docs/integrations/chat/' };
|
||||
case 'embeddings':
|
||||
return { text: 'embeddings model', link: '/docs/integrations/text_embedding/' };
|
||||
case 'vectorstore':
|
||||
return { text: 'vector store', link: '/docs/integrations/vectorstores/' };
|
||||
default:
|
||||
return { text: 'chat model', link: '/docs/integrations/chat/' };
|
||||
}
|
||||
};
|
||||
|
||||
const { text, link } = getModelTextAndLink();
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem', gap: '0.75rem' }}>
|
||||
<span style={{
|
||||
fontSize: '1rem',
|
||||
fontWeight: '500',
|
||||
}}>
|
||||
Select <a href="/docs/integrations/chat/">chat model</a>:
|
||||
Select <a href={link}>{text}</a>:
|
||||
</span>
|
||||
<div className={`dropdown ${isOpen ? 'dropdown--show' : ''}`}>
|
||||
<button
|
||||
@ -300,6 +316,7 @@ return (
|
||||
selectedOption={selectedOption}
|
||||
options={modelOptions}
|
||||
onSelect={setSelectedModel}
|
||||
modelType="chat"
|
||||
/>
|
||||
|
||||
<CodeBlock language="bash">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
import React, { useState } from "react";
|
||||
import CodeBlock from "@theme-original/CodeBlock";
|
||||
import { CustomDropdown } from './ChatModelTabs';
|
||||
|
||||
export default function EmbeddingTabs(props) {
|
||||
const [selectedModel, setSelectedModel] = useState("OpenAI");
|
||||
const {
|
||||
openaiParams,
|
||||
hideOpenai,
|
||||
@ -148,24 +148,47 @@ export default function EmbeddingTabs(props) {
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Tabs groupId="modelTabs">
|
||||
{tabItems
|
||||
.filter((tabItem) => !tabItem.shouldHide)
|
||||
.map((tabItem) => {
|
||||
const apiKeyText = tabItem.apiKeyName ? `import getpass\n\nos.environ["${tabItem.apiKeyName}"] = getpass.getpass()` : '';
|
||||
return (
|
||||
<TabItem
|
||||
value={tabItem.value}
|
||||
label={tabItem.label}
|
||||
default={tabItem.default}
|
||||
>
|
||||
<CodeBlock language="bash">{`pip install -qU ${tabItem.packageName}`}</CodeBlock>
|
||||
<CodeBlock language="python">{apiKeyText + (apiKeyText ? "\n\n" : '') + tabItem.text}</CodeBlock>
|
||||
</TabItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
const modelOptions = tabItems
|
||||
.filter((item) => !item.shouldHide)
|
||||
.map((item) => ({
|
||||
value: item.value,
|
||||
label: item.label,
|
||||
text: item.text,
|
||||
apiKeyName: item.apiKeyName,
|
||||
apiKeyText: item.apiKeyText,
|
||||
packageName: item.packageName,
|
||||
}));
|
||||
|
||||
const selectedOption = modelOptions.find(
|
||||
(option) => option.value === selectedModel
|
||||
);
|
||||
|
||||
let apiKeyText = "";
|
||||
if (selectedOption.apiKeyName) {
|
||||
apiKeyText = `import getpass
|
||||
import os
|
||||
|
||||
if not os.environ.get("${selectedOption.apiKeyName}"):
|
||||
os.environ["${selectedOption.apiKeyName}"] = getpass.getpass("Enter API key for ${selectedOption.label}: ")`;
|
||||
} else if (selectedOption.apiKeyText) {
|
||||
apiKeyText = selectedOption.apiKeyText;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<CustomDropdown
|
||||
selectedOption={selectedOption}
|
||||
options={modelOptions}
|
||||
onSelect={setSelectedModel}
|
||||
modelType="embeddings"
|
||||
/>
|
||||
|
||||
<CodeBlock language="bash">
|
||||
{`pip install -qU ${selectedOption.packageName}`}
|
||||
</CodeBlock>
|
||||
<CodeBlock language="python">
|
||||
{apiKeyText ? apiKeyText + "\n\n" + selectedOption.text : selectedOption.text}
|
||||
</CodeBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
import React, { useState } from "react";
|
||||
import CodeBlock from "@theme-original/CodeBlock";
|
||||
import { CustomDropdown } from './ChatModelTabs';
|
||||
|
||||
export default function VectorStoreTabs(props) {
|
||||
const [selectedModel, setSelectedModel] = useState("In-memory");
|
||||
const { customVarName, useFakeEmbeddings = false } = props;
|
||||
|
||||
const vectorStoreVarName = customVarName ?? "vector_store";
|
||||
@ -76,19 +76,34 @@ export default function VectorStoreTabs(props) {
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Tabs groupId="vectorStoreTabs">
|
||||
{tabItems.map((tabItem) => (
|
||||
<TabItem
|
||||
key={tabItem.value}
|
||||
value={tabItem.value}
|
||||
label={tabItem.label}
|
||||
default={tabItem.default}
|
||||
>
|
||||
<CodeBlock language="bash">{`pip install -qU ${tabItem.packageName}`}</CodeBlock>
|
||||
<CodeBlock language="python">{tabItem.text}</CodeBlock>
|
||||
</TabItem>
|
||||
))}
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
const modelOptions = tabItems
|
||||
.filter((item) => !item.shouldHide)
|
||||
.map((item) => ({
|
||||
value: item.value,
|
||||
label: item.label,
|
||||
text: item.text,
|
||||
packageName: item.packageName,
|
||||
}));
|
||||
|
||||
const selectedOption = modelOptions.find(
|
||||
(option) => option.value === selectedModel
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<CustomDropdown
|
||||
selectedOption={selectedOption}
|
||||
options={modelOptions}
|
||||
onSelect={setSelectedModel}
|
||||
modelType="vectorstore"
|
||||
/>
|
||||
|
||||
<CodeBlock language="bash">
|
||||
{`pip install -qU ${selectedOption.packageName}`}
|
||||
</CodeBlock>
|
||||
<CodeBlock language="python">
|
||||
{selectedOption.text}
|
||||
</CodeBlock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user