Setup Image Search

import React, { useState, useRef } from 'react';
import { uploadFile, getPresignedUrl } from 'trieve-sdk';

export const ImageUploader = ({ trieveSDK }) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = event.target.files?.[0];
    if (selectedFile) {
      handleFileUpload(selectedFile);
    }
  };

  return (
    <div>
      <input 
        type="file" 
        ref={fileInputRef}
        accept="image/*"
        onChange={handleFileSelect}
        className="hidden"
      />
      <button onClick={() => fileInputRef.current?.click()}>
        Upload Image
      </button>
    </div>
  );
};

const handleFileUpload = async (selectedFile: File) => {
  try {
    // Convert the file to a base64 string
    const base64 = await convertToBase64(selectedFile);
    
    // Upload the file to Trieve and get a unique file ID
    const fileId = await uploadFile(trieveSDK, selectedFile.name, base64, {
      create_chunks: false // Set to false to ensure that your file isn't indexed
    });

    // Get a public URL for the uploaded image
    const imageUrl = await getPresignedUrl(trieveSDK, fileId);
    
    return imageUrl;
  } catch (error) {
    console.error('Image upload failed:', error);
    return null;
  }
};

const performImageSearch = async (imageUrl: string) => {
  try {
    const searchResults = await trieveSDK.search({
      query: { image_url: imageUrl },
      search_type: 'semantic',
      page_size: 10, // Adjust as needed
    });

    return searchResults.chunks;
  } catch (error) {
    console.error('Image search failed:', error);
    return [];
  }
};