# Subidas

Flowise te permite subir imágenes, audio y otros archivos desde el chat. En esta sección, aprenderás cómo habilitar y usar estas funcionalidades.

## Image

Ciertos modelos de chat permiten ingresar imágenes. Siempre consulta la documentación oficial del LLM para confirmar si el modelo admite la entrada de imágenes.

* [ChatOpenAI](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/llamaindex/chat-models/chatopenai.md)
* [AzureChatOpenAI](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/llamaindex/chat-models/azurechatopenai.md)
* [ChatAnthropic](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/chat-models/chatanthropic.md)
* [AWSChatBedrock](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/chat-models/aws-chatbedrock.md)
* [ChatGoogleGenerativeAI](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/chat-models/google-ai.md)
* [ChatOllama](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/llamaindex/chat-models/chatollama.md)
* [Google Vertex AI](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/llms/googlevertex-ai.md)

{% hint style="warning" %}
El procesamiento de imágenes solo funciona con ciertas cadenas/agentes en Chatflow.

[LLMChain](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/chains/llm-chain.md), [Conversation Chain](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/chains/conversation-chain.md), [ReAct Agent](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/agents/react-agent-chat.md), [Conversational Agent](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/agents/conversational-agent.md), [Tool Agent](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/agents/tool-agent.md)
{% endhint %}

Si habilitas **Allow Image Upload**, podrás subir imágenes desde la interfaz de chat.

<div align="center"><figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-b3871bd9e9a44419c5661ba8117440b381e26dde%2Fimage%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt="" width="255"><figcaption></figcaption></figure> <figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-86ae8cbe67ed132c8e9993ffef433ed79ffd13f3%2FScreenshot%202024-02-29%20011714.png?alt=media" alt="" width="290"><figcaption></figcaption></figure></div>

Para subir imágenes con la API:

{% tabs %}
{% tab title="Python" %}

```python
import requests
API_URL = "http://localhost:3000/api/v1/prediction/<chatflowid>"

def query(payload):
    response = requests.post(API_URL, json=payload)
    return response.json()
    
output = query({
    "question": "¿Puedes describir la imagen?",
    "uploads": [
        {
            "data": "data:image/png;base64,iVBORw0KGgdM2uN0", # cadena base64 o url
            "type": "file", # file | url
            "name": "Flowise.png",
            "mime": "image/png"
        }
    ]
})
```

{% endtab %}

{% tab title="Javascript" %}

```javascript
async function query(data) {
    const response = await fetch(
        "http://localhost:3000/api/v1/prediction/<chatflowid>",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        }
    );
    const result = await response.json();
    return result;
}

query({
    "question": "¿Puedes describir la imagen?",
    "uploads": [
        {
            "data": "data:image/png;base64,iVBORw0KGgdM2uN0", //cadena base64 o url
            "type": "file", // file | url
            "name": "Flowise.png",
            "mime": "image/png"
        }
    ]
}).then((response) => {
    console.log(response);
});
```

{% endtab %}
{% endtabs %}

## Audio

En la Configuración del Chatflow, puedes seleccionar un módulo de speech-to-text. Las integraciones soportadas incluyen:

* OpenAI
* AssemblyAI
* [LocalAI](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/chat-models/chatlocalai.md)

Cuando esto está habilitado, los usuarios pueden hablar directamente al micrófono. Su voz se transcribe a texto.

<div align="left"><figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-0dd60a403ed7dcb5d2c52af7f222ad3bdb228c5f%2Fimage%20(2)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-836d8aaf00689baaf5b4e5bb59adf9a6e8ef558b%2FScreenshot%202024-02-29%20012538.png?alt=media" alt="" width="431"><figcaption></figcaption></figure></div>

Para subir audio con la API:

{% tabs %}
{% tab title="Python" %}

```python
import requests
API_URL = "http://localhost:3000/api/v1/prediction/<chatflowid>"

def query(payload):
    response = requests.post(API_URL, json=payload)
    return response.json()
    
output = query({
    "uploads": [
        {
            "data": "data:audio/webm;codecs=opus;base64,GkXf", # cadena base64
            "type": "audio",
            "name": "audio.wav",
            "mime": "audio/webm"
        }
    ]
})
```

{% endtab %}

{% tab title="Javascript" %}

```javascript
async function query(data) {
    const response = await fetch(
        "http://localhost:3000/api/v1/prediction/<chatflowid>",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        }
    );
    const result = await response.json();
    return result;
}

query({
    "uploads": [
        {
            "data": "data:audio/webm;codecs=opus;base64,GkXf", // cadena base64
            "type": "audio",
            "name": "audio.wav",
            "mime": "audio/webm"
        }
    ]
}).then((response) => {
    console.log(response);
});
```

{% endtab %}
{% endtabs %}

## Files

Puedes subir archivos de dos maneras:

* Carga de archivos para generación aumentada por recuperación (RAG)
* Carga completa de archivos

Cuando ambas opciones están activadas, la carga completa de archivos tiene prioridad.

### RAG File Uploads

Puedes hacer upsert de los archivos subidos al vector store sobre la marcha. Para habilitar la carga de archivos, asegúrate de cumplir con estos requisitos previos:

* Debes incluir un vector store que admita la carga de archivos en el chatflow.
  * [Pinecone](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/vector-stores/pinecone.md)
  * [Milvus](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/vector-stores/milvus.md)
  * [Postgres](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/vector-stores/postgres.md)
  * [Qdrant](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/vector-stores/qdrant.md)
  * [Upstash](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/vector-stores/upstash-vector.md)
* Si tienes múltiples vector stores en un chatflow, solo puedes activar la carga de archivos para un vector store a la vez.
* Debes conectar al menos un nodo document loader a la entrada de documentos del vector store.
* Document loaders soportados:
  * [CSV File](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/document-loaders/csv-file.md)
  * [Docx File](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/document-loaders/docx-file.md)
  * [Json File](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/document-loaders/json-file.md)
  * [Json Lines File](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/document-loaders/json-lines-file.md)
  * [PDF File](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/document-loaders/pdf-file.md)
  * [Text File](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/document-loaders/text-file.md)
  * [Unstructured File](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/document-loaders/unstructured-file-loader.md)

<figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-83628ae5924a794dbe7e9c823538ca03d4f11e41%2Fimage%20(2)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Puedes subir uno o más archivos en el chat:

<div align="left"><figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-02226006c1f836ca7934fb52a548d2794d8e66d5%2Fimage%20(3)%20(1)%20(1)%20(1).png?alt=media" alt="" width="380"><figcaption></figcaption></figure> <figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-d92144a8c957b00f956b178a680b22ef99af05ec%2FScreenshot%202024-08-26%20170456.png?alt=media" alt=""><figcaption></figcaption></figure></div>

Así es como funciona:

1. Los metadatos de los archivos subidos se actualizan con el chatId.
2. Esto asocia el archivo con el chatId.
3. Al consultar, se aplica un filtro **OR**:

* Los metadatos contienen `flowise_chatId`, y el valor es el ID de la sesión de chat actual
* Los metadatos no contienen `flowise_chatId`

Un ejemplo de un vector embedding con upsert en Pinecone:

<figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-3578f9e1c0aa67fc818f80455cbdf61a106049f9%2Fimage%20(4)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Para hacer esto con la API, sigue estos dos pasos:

1. Usa la [Vector Upsert API](https://docs.flowiseai.com/espanol/documentacion-oficial/api#vector-upsert-api) con `formData` y `chatId`:

{% tabs %}
{% tab title="Python" %}

```python
import requests

API_URL = "http://localhost:3000/api/v1/vector/upsert/<chatflowid>"

# Usa form data para subir archivos
form_data = {
    "files": ("state_of_the_union.txt", open("state_of_the_union.txt", "rb"))
}

body_data = {
    "chatId": "some-session-id"
}

def query(form_data):
    response = requests.post(API_URL, files=form_data, data=body_data)
    print(response)
    return response.json()

output = query(form_data)
print(output)
```

{% endtab %}

{% tab title="Javascript" %}

```javascript
// Usa FormData para subir archivos
let formData = new FormData();
formData.append("files", input.files[0]);
formData.append("chatId", "some-session-id");

async function query(formData) {
    const response = await fetch(
        "http://localhost:3000/api/v1/vector/upsert/<chatflowid>",
        {
            method: "POST",
            body: formData
        }
    );
    const result = await response.json();
    return result;
}

query(formData).then((response) => {
    console.log(response);
});
```

{% endtab %}
{% endtabs %}

2. Usa la [Prediction API](https://docs.flowiseai.com/espanol/documentacion-oficial/api#prediction) con `uploads` y el `chatId` del paso 1:

{% tabs %}
{% tab title="Python" %}

```python
import requests
API_URL = "http://localhost:3000/api/v1/prediction/<chatflowid>"

def query(payload):
    response = requests.post(API_URL, json=payload)
    return response.json()
    
output = query({
    "question": "¿De qué trata el discurso?",
    "chatId": "same-session-id-from-step-1",
    "uploads": [
        {
            "data": "data:text/plain;base64,TWFkYWwcy4=",
            "type": "file:rag",
            "name": "state_of_the_union.txt",
            "mime": "text/plain"
        }
    ]
})
```

{% endtab %}

{% tab title="Javascript" %}

```javascript
async function query(data) {
    const response = await fetch(
        "http://localhost:3000/api/v1/prediction/<chatflowid>",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        }
    );
    const result = await response.json();
    return result;
}

query({
    "question": "¿De qué trata el discurso?",
    "chatId": "same-session-id-from-step-1",
    "uploads": [
        {
            "data": "data:text/plain;base64,TWFkYWwcy4=",
            "type": "file:rag",
            "name": "state_of_the_union.txt",
            "mime": "text/plain"
        }
    ]
}).then((response) => {
    console.log(response);
});
```

{% endtab %}
{% endtabs %}

### Full File Uploads

Con las cargas de archivos RAG, no puedes trabajar con datos estructurados como hojas de cálculo o tablas, y no puedes realizar resúmenes completos debido a la falta de contexto completo. En algunos casos, es posible que desees incluir todo el contenido del archivo directamente en el prompt para un LLM, especialmente con modelos como Gemini y Claude que tienen ventanas de contexto más largas. [Este artículo de investigación](https://arxiv.org/html/2407.16833v1) es uno de muchos que comparan RAG con ventanas de contexto más largas.

Para habilitar la carga completa de archivos, ve a **Chatflow Configuration**, abre la pestaña **File Upload**, y activa el interruptor:

<figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-9020bb70fa0e381aefbb189b564bd81490413782%2Fimage%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Puedes ver el botón **File Attachment** en el chat, donde puedes subir uno o más archivos. Internamente, el [File Loader](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/integrations/langchain/document-loaders/file-loader.md) procesa cada archivo y lo convierte en texto.

<figure><img src="https://4068692976-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUiD7nOmFRK805sNuiieJ%2Fuploads%2Fgit-blob-9dd4614e23d8f3ddfd6721a23eaaf060434db0fb%2Fimage%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Para subir archivos con la API:

{% tabs %}
{% tab title="Python" %}

```python
import requests
API_URL = "http://localhost:3000/api/v1/prediction/<chatflowid>"

def query(payload):
    response = requests.post(API_URL, json=payload)
    return response.json()
    
output = query({
    "question": "¿De qué tratan los datos?",
    "chatId": "some-session-id",
    "uploads": [
        {
            "data": "data:text/plain;base64,TWFkYWwcy4=",
            "type": "file:full",
            "name": "state_of_the_union.txt",
            "mime": "text/plain"
        }
    ]
})
```

{% endtab %}

{% tab title="Javascript" %}

```javascript
async function query(data) {
    const response = await fetch(
        "http://localhost:3000/api/v1/prediction/<chatflowid>",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        }
    );
    const result = await response.json();
    return result;
}

query({
    "question": "¿De qué tratan los datos?",
    "chatId": "some-session-id",
    "uploads": [
        {
            "data": "data:text/plain;base64,TWFkYWwcy4=",
            "type": "file:full",
            "name": "state_of_the_union.txt",
            "mime": "text/plain"
        }
    ]
}).then((response) => {
    console.log(response);
});
```

{% endtab %}
{% endtabs %}

Como puedes ver en los ejemplos, las cargas requieren una cadena base64. Para obtener una cadena base64 para un archivo, usa la [Create Attachments API](https://github.com/FlowiseAI/FlowiseDocs/blob/main/esp/api-reference/attachments.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flowiseai.com/espanol/documentacion-oficial/usar-flowise/subidas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
