Subidas

Aprende cómo subir imágenes, audio y otros archivos

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

• AzureChatOpenAI

• ChatAnthropic

• AWSChatBedrock

• ChatGoogleGenerativeAI

• ChatOllama

• Google Vertex AI

El procesamiento de imágenes solo funciona con ciertas cadenas/agentes en Chatflow.

LLMChain, Conversation Chain, ReAct Agent, Conversational Agent, Tool Agent

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

Para subir imágenes con la API:

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"
        }
    ]
})

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);
});

Audio

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

• OpenAI

• AssemblyAI

• LocalAI

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

Para subir audio con la API:

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"
        }
    ]
})

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);
});

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

  • Milvus

  • Postgres

  • Qdrant

  • Upstash

• 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

  • Docx File

  • Json File

  • Json Lines File

  • PDF File

  • Text File

  • Unstructured File

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

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:

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

1. Usa la Vector Upsert API con formData y chatId:

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)

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);
});

1. Usa la Prediction API con uploads y el chatId del paso 1:

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"
        }
    ]
})

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);
});

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 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:

Puedes ver el botón File Attachment en el chat, donde puedes subir uno o más archivos. Internamente, el File Loader procesa cada archivo y lo convierte en texto.

Para subir archivos con la API:

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"
        }
    ]
})

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);
});

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.