Build your own screenshot sharing application

#!/bin/bash
 
# These are the folders on our machine we use to drop files to
IN=$HOME/davecloud/in/
OUT=$HOME/davecloud/out/
 
# Store your files in folders by date. For me I use "2023OCT" as a readable format
D=$(date +%Y%b)
DATEF=${D^^}/
 
 
# inotify is Linux's native service to watch for file changes
# notify-send is Linux's generic service to send noticiations
inotifywait -m -e create -e moved_to --format "%f" $IN \
  | while read FILENAME
    do
      echo Detected $FILENAME
      # Files saved across WSL seem to appear before they exist. A short sleep helps.
      if [ -n "$WSL_DISTRO_NAME" ]; then
        sleep 1
      fi
 
      # Generate a random id for our images. This gives us hard to guess urls
      MD5=$(openssl rand -base64 12 | tr -- '+=/' '-_~')
      RAND=($MD5.${FILENAME##*.})
 
      # Make an out directory if none exist
      if [ ! -d "${OUT}${DATEF}" ]; then
        eval mkdir "${OUT}${DATEF}"
        echo madking directory "${OUT}${DATEF}"
      fi
 
      # Move our files over to process them
      mv "${IN}${FILENAME}" "${OUT}${DATEF}${RAND}" || echo failed move
      echo attempting to move "${IN}${FILENAME}" TO "${OUT}${DATEF}${RAND}"
 
      # Use Google Cloud's gsutil program to shuttle them to my google storage bucket
      gsutil mv "${OUT}${DATEF}" gs://your-bucket-name/ || notify-send "Failure" --urgency=critical
 
      # Files saved across WSL seem to appear before they exist. A short sleep helps.
      if [ -n "$WSL_DISTRO_NAME" ]; then
        sleep 2
      fi
      rm -rf "${OUT}${DATEF}"
 
      # If we're on windows, use WSL's notifiy systems to manage notifications
      if [ -n "$WSL_DISTRO_NAME" ]; then
        echo "https://snid.es/$DATEF$RAND" | tr -d '\n' | clip.exe
        eval wsl-notify-send.exe --category "Uploaded" "https://snid.es/$DATEF$RAND" --urgency=normal
      else
        # My GNOME system runs wayland, so wl-copy is used
        echo "https://snid.es/$DATEF$RAND" | tr -d '\n' | wl-copy
        eval notify-send "Uploaded" "https://snid.es/$DATEF$RAND" --urgency=normal
      fi
    done

[Desktop Entry]
Name=Screenshots
GenericName=Script
Comment=Uploads files to gcloud through inotify
Exec=.config/scripts/watch.sh # Point to the location of your script
Terminal=false
Type=Application
X-GNOME-Autostart-enabled=true

#!/usr/bin/env sh
 
# Author: Dave Snider
# NNN plugin to copy files to my watch filder
 
if ! [ -z "$1" ] && [ -s "$1" ]; then
  cp "$1" $HOME/davecloud/in
  exit 2
else
  printf "empty file!"
fi
 
read -r _

# Create a directory for your watch script
mkdir watch
cd watch
 
# Install Xata's CLI if you haven't already
pnpm add -g @xata.io/cli
 
# Auth Xata with its CLI
xata auth login
 
# Install the dependencies we'll need
pnpm add @google-cloud/stroage @google-cloud/vision @types/mime chokidar dotenv mime

cd watch
xata init --schema /path/to/schema.json

XATA_BRANCH=main
XATA_API_KEY=yourapikey
GOOGLE_PROJECT_ID=yourprojectid
GOOGLE_BUCKET_ID=yourbucketname
GOOGLE_KEY_FILE_LOCATION=/path/to/google-creds.json

{
  "tables": [
    {
      "name": "files",
      "columns": [
        {
          "name": "file",
          "type": "file"
        },
        {
          "name": "googleURL",
          "type": "string"
        },
        {
          "name": "originalUploadDate",
          "type": "datetime"
        },
        {
          "name": "visionLabel",
          "type": "json"
        },
        {
          "name": "visionImageProperties",
          "type": "json"
        },
        {
          "name": "dominantColor",
          "type": "string"
        },
        {
          "name": "textContent",
          "type": "text"
        },
        {
          "name": "visionText",
          "type": "json"
        },
        {
          "name": "focusColor",
          "type": "string"
        },
        {
          "name": "fileTypeCategory",
          "type": "string",
          "notNull": true,
          "defaultValue": "unknown"
        },
        {
          "name": "isHidden",
          "type": "bool",
          "notNull": true,
          "defaultValue": "false"
        },
        {
          "name": "isFavorite",
          "type": "bool",
          "notNull": true,
          "defaultValue": "false"
        }
      ]
    }
  ]
}

import * as chokidar from 'chokidar';
import { Storage } from '@google-cloud/storage';
import { ImageAnnotatorClient } from '@google-cloud/vision';
import * as fs from 'fs';
import * as crypto from 'crypto';
import * as path from 'path';
import * as mime from 'mime';
import { FilesRecord, XataClient } from './xata';
import { exec } from 'child_process';
import * as dotenv from 'dotenv';
dotenv.config({ path: path.resolve(__dirname, '.env') });
 
// This script assume you have a sibling `.env` file with the variables defined earlier
 
process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
});
 
const fileTimeouts: { [key: string]: NodeJS.Timeout } = {};
const bucketName = 'cloudsite';
// An .env file alongside this repo stores my key
const xata = new XataClient({ apiKey: process.env.XATA_API_KEY, branch: 'main' });
 
// Watch for new files
// CHANGE THIS FOLDER LOCATION, I'VE HARDCODED IT
const watcher = chokidar.watch(process.env.HOME + '/davecloud/in', {
  persistent: true
});
 
// GCP Storage for backups
const storage = new Storage({
  // Google provides this crendentials in the form of a JSON file
  keyFilename: process.env.GOOGLE_KEY_FILE_LOCATION,
  projectId: 'my-google-bucket'
});
 
// GCP Vision API
const visionClient = new ImageAnnotatorClient({
  keyFilename: process.env.GOOGLE_KEY_FILE_LOCATION,
  projectId: 'my-google-bucket'
});
 
// Add and change events are debounced to avoid processing incomplete files
watcher
  .on('add', (filePath: string) => {
    scheduleProcessing(filePath);
  })
  .on('change', (filePath: string) => {
    if (fileTimeouts[filePath]) {
      clearTimeout(fileTimeouts[filePath]);
    }
    scheduleProcessing(filePath);
  });
 
// Check for files every 100ms
function scheduleProcessing(filePath: string) {
  fileTimeouts[filePath] = setTimeout(() => {
    processFile(filePath);
    delete fileTimeouts[filePath];
  }, 100);
}
 
// Files are processed by uploading to GCS, creating a record in Xata, and sending a notification
async function processFile(filePath: string) {
  try {
    const fileName = path.basename(filePath);
    const date = new Date();
    const formattedDate = `${date.getFullYear()}${date.toLocaleString('en', { month: 'short' }).toUpperCase()}/`;
    const randomString = crypto
      .randomBytes(12)
      .toString('base64')
      .replace(/[+=/]/g, (char) => {
        switch (char) {
          case '+':
            return '-';
          case '=':
            return '_';
          case '/':
            return '~';
          default:
            return char;
        }
      });
    const destinationFileName = `${formattedDate}${randomString}.${fileName.split('.').pop()}`;
 
    // Determine the content type of the file
    const contentType = mime.getType(filePath) || 'application/octet-stream';
 
    // Upload to Google Cloud Storage
    await storage.bucket(bucketName).upload(filePath, {
      destination: destinationFileName,
      metadata: {
        contentType: contentType
      }
    });
    console.log(`File uploaded to GCS: ${destinationFileName}`);
 
    // Upload to Xata
    const fileMetadata = {
      name: destinationFileName,
      contentType: contentType // Set the actual content type
    };
 
    const xataRecord = await createRecordInXata(fileMetadata, filePath, randomString);
    console.log(`Record created in Xata with ID: ${xataRecord.id}`);
 
    // Send notification
    const fileExtension = fileName.split('.').pop() || '';
    const url = `https://snid.es/${formattedDate}${randomString}`;
    sendNotification(url, fileExtension);
 
    console.log('About to call Vision API for:', `gs://${bucketName}/${destinationFileName}`);
 
    // Call Vision API if it's an image
    if (fileMetadata.contentType?.startsWith('image/')) {
      await callVisionAPI(xataRecord, destinationFileName);
    }
 
    // Delete local file
    fs.unlinkSync(filePath);
    console.log(`Local file deleted: ${filePath}`);
  } catch (error) {
    console.error('ERROR:', error);
  }
}
 
// Process the image with the Google Vision APIs
async function callVisionAPI(xataRecord: FilesRecord, destinationFileName: string) {
  try {
    const [result] = await visionClient.annotateImage({
      image: { source: { imageUri: `gs://${bucketName}/${destinationFileName}` } },
      features: [{ type: 'LABEL_DETECTION' }, { type: 'TEXT_DETECTION' }, { type: 'IMAGE_PROPERTIES' }]
    });
 
    let dominantColor = null;
    let focusColor = null;
    if (
      result.imagePropertiesAnnotation &&
      result.imagePropertiesAnnotation.dominantColors &&
      result.imagePropertiesAnnotation.dominantColors.colors
    ) {
      const colors = result.imagePropertiesAnnotation.dominantColors.colors;
      // Sort the colors based on their score to find the most dominant color
      const dominantColorObject = colors.sort((a, b) => (b.pixelFraction || 0) - (a.pixelFraction || 0))[0];
      const focusColorObject = colors.sort((a, b) => (b.score || 0) - (a.score || 0))[0];
      focusColor = rgbToHex(
        focusColorObject.color?.red || 0,
        focusColorObject.color?.green || 0,
        focusColorObject.color?.blue || 0
      );
      dominantColor = rgbToHex(
        dominantColorObject.color?.red || 0,
        dominantColorObject.color?.green || 0,
        dominantColorObject.color?.blue || 0
      );
    }
 
    const visionData: any = {};
 
    if (result.labelAnnotations) {
      visionData.visionLabel = result.labelAnnotations;
    }
 
    if (result.textAnnotations && result.textAnnotations[0]) {
      visionData.visionText = result.textAnnotations;
      visionData.textContent = result.textAnnotations[0].description;
    }
 
    if (result.imagePropertiesAnnotation) {
      visionData.visionImageProperties = result.imagePropertiesAnnotation;
      if (dominantColor) {
        visionData.dominantColor = dominantColor;
      }
      if (focusColor) {
        visionData.focusColor = focusColor;
      }
    }
 
    // Update the Xata record with the vision data
    if (Object.keys(visionData).length > 0) {
      await xata.db.files.update(xataRecord.id, visionData);
      console.log(`Record updated in Xata with vision data for ID: ${xataRecord.id}`);
    }
  } catch (err: any) {
    console.error('Error from Vision API:', err);
    if (err.details) {
      console.error('Error details:', err.details);
    }
    if (!err.stack) {
      console.error('The error object does not have a stack trace.');
    }
  }
}
 
// Create a record in Xata
async function createRecordInXata(fileMetadata: any, filePath: string, id: string) {
  const fileTypeCategory = fileMetadata.contentType?.split('/')[0];
  const record = await xata.db.files.create({
    googleURL: fileMetadata.name,
    id: id,
    originalUploadDate: new Date(),
    fileTypeCategory
  });
 
  // Read the local file
  const fileContents = fs.readFileSync(filePath);
  const fileBlob = new Blob([fileContents]);
  // Upload it to Xata using their binary upload method
  // This is needed because many of my files are large
  await xata.files.upload({ table: 'files', column: 'file', record: record.id }, fileBlob);
  await xata.db.files.update(record.id, { file: { mediaType: fileMetadata.contentType } });
  return record;
}
 
// Notifications work differently on WSL vs. Linux
function sendNotification(url: string, fileExtension: string) {
  const completeUrl = `${url}.${fileExtension}`;
  const isWSL = process.env.WSL_DISTRO_NAME !== undefined;
  const notificationCommand = isWSL
    ? `echo "${completeUrl}" | tr -d '\n' | clip.exe && wsl-notify-send.exe --category "Uploaded" "${completeUrl}" --urgency=normal`
    : `echo "${completeUrl}" | tr -d '\n' | wl-copy && notify-send "Uploaded" "${completeUrl}" --urgency=normal`;
 
  exec(notificationCommand, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error sending notification: ${error}`);
      return;
    }
    console.log(`Notification sent: ${completeUrl}`);
  });
}
 
// Convert RGB to hex
function rgbToHex(r: number, g: number, b: number) {
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
}

#!/bin/bash
 
# Change these to the directory where your TypeScript project lives
cd /home/snide/code/watch/
/home/snide/.local/share/pnpm/pnpm run start ~/code/watch/index.ts > ~/watch.log 2>&1

[Desktop Entry]
Name=Screenshots
GenericName=Script
Comment=Uploads files to gcloud through inotify
Exec=.config/scripts/watch.sh # Point to the location of your script
Terminal=false
Type=Application
X-GNOME-Autostart-enabled=true

// To get files out of the db
const fileRecords = await xata.db.files.getPaginated({ pagination: { size: 10}});
 
// TO search for files by a keyword
const fileRecords = await xata.db.files.search('my search term', {
  // Target the text columns with our Google Vision content
  target: ['textContent', 'visionLabel']
  fuzziness: 1,
  page: {
    size: 10
  }
})
 
// To aggregate the number of screenshots uploaded per month
// This is how the bar chart histogram is built
const xataAgg = await xata.db.files.aggregate(
  {
    byDate: {
      dateHistogram: {
        column: 'originalUploadDate',
        calendarInterval: 'month'
      }
    }
  },
);
 
// Transform any of the images on the fly
const record = await xata.db.files.read('record_id');
 
const { url } = record.file.transform({
  height: 100,
  rotate: 180,
  format: 'webp'
});