DAMTool

🎨 Kwitykwity DAM Tool - Complete Setup Guide

A Digital Asset Management tool that uses AI to automatically tag your images!

⚡ What You’ll Build

By the end of this guide, you’ll have:

🤖 AI-powered image tagging using Google Cloud Vision
🔍 Instant search across all your assets
🖼️ Beautiful thumbnail gallery
⬇️ One-click downloads
🔄 Auto-sync with Google Drive
💯 100% FREE using Google’s free tier!

⏱️ Total time: 15-20 minutes

📋 Prerequisites

Before you start, make sure you have:

✅ A Google account (Gmail)
✅ Basic ability to copy/paste
✅ 3-5 test images ready to upload

No coding experience needed! 🎉

🚀 Part 1: Get the Code (5 minutes)

Step 1: Download the Files

Option A: Download ZIP (Easiest)

Go to github.com/kwitykwity/DAMTool
Click the green Code button
Click Download ZIP
Extract the ZIP file to your computer
You should see: Code.gs and DAMTool.html

Option B: Clone with Git

git clone https://github.com/kwitykwity/DAMTool.git
cd DAMTool

✅ Checkpoint: You have Code.gs and DAMTool.html files on your computer

📊 Part 2: Create Your Google Sheet (2 minutes)

Step 2: Make Your Database

🌐 Go to sheets.google.com
➕ Click Blank to create a new spreadsheet
📝 At the top, click “Untitled spreadsheet”
🎯 Rename it: “DAM Database” (or any name you like)
✅ Leave this tab open!

🎉 You now have your database!

🗂️ Part 3: Create Your Image Folder (2 minutes)

Step 3: Set Up Google Drive Folder

🌐 Go to drive.google.com
➕ Click New → Folder
📁 Name it: “DAM Assets” (or any name)
📸 Upload 3-5 test images to this folder
- Supported: JPG, PNG, GIF, WebP, BMP
🔗 Get the Folder ID:
- Open the folder
- Look at the URL: https://drive.google.com/drive/folders/FOLDER_ID_HERE
- Copy the ID (the long string after /folders/)
- Example: 13kaO35wK7x3pGQrrCL7b0FGgVw5NjUP
📋 Paste it in a notepad - you’ll need it soon!

✅ Checkpoint: You have a folder with images and the Folder ID saved

🔑 Part 4: Get Your API Key (5 minutes)

Step 4: Enable Google Cloud Vision API

🎯 This is what gives your tool AI superpowers!

🌐 Go to console.cloud.google.com
🆕 Click Select a project → New Project
📝 Name it: “DAM Tool”
⏳ Click Create (wait 30 seconds)
🔔 Click the notification bell when it’s ready

Enable the Vision API:

🔍 In the search bar at top, type: “Cloud Vision API”
📱 Click Cloud Vision API from results
💙 Click the blue Enable button
⏳ Wait 30 seconds for it to enable

Create Your API Key:

🔧 Click APIs & Services → Credentials (left sidebar)
➕ Click + Create Credentials (top)
🔑 Select API Key
🎉 A popup shows your key: AIzaSy...
📋 Click Copy and paste in your notepad
⚙️ Click Restrict Key (important for security!)
Under “API restrictions”:
- Select Restrict key
- Check ✅ Cloud Vision API
💾 Click Save

✅ Checkpoint: You have your API key saved (starts with AIzaSy...)

📇 Part 5: Get Your Spreadsheet ID (1 minute)

Step 5: Find Your Sheet ID

🔙 Go back to your Google Sheet tab

👀 Look at the URL in the address bar:

https://docs.google.com/spreadsheets/d/SPREADSHEET_ID_HERE/edit

📋 Copy the ID between /d/ and /edit
- Example: 1H5o5NsDuqx5N9g9tXqNNVynAqqoWYqbCYcdjwfy31rQ
📝 Paste it in your notepad

✅ Checkpoint: You now have all three IDs saved:

✅ API Key
✅ Drive Folder ID
✅ Spreadsheet ID

💻 Part 6: Add the Code (5 minutes)

Step 6a: Open Apps Script

🔙 Go to your Google Sheet
🧩 Click Extensions → Apps Script
🆕 A new tab opens with Apps Script editor
🗑️ Delete the placeholder code: function myFunction() { ... }

Step 6b: Add Backend Code

📂 Open the Code.gs file you downloaded
📋 Select ALL the code (Ctrl+A / Cmd+A)
📋 Copy it (Ctrl+C / Cmd+C)
🖥️ Go back to Apps Script tab
📋 Paste the code (Ctrl+V / Cmd+V)
💾 Click the Save icon (💾) at top
📝 Name the project: “DAM Tool”

Step 6c: Add HTML Interface

➕ Click the + button next to “Files” (left sidebar)
📄 Select HTML
⚠️ IMPORTANT: Name it exactly: DAMTool (no .html extension!)
✅ Click OK
🗑️ Delete the placeholder HTML
📂 Open the DAMTool.html file you downloaded
📋 Select ALL and Copy
🖥️ Go back to Apps Script
📋 Paste into the DAMTool file
💾 Click Save

✅ Checkpoint: You should see two files in the left sidebar:

✅ Code.gs
✅ DAMTool.html

⚙️ Part 7: Configure Your Credentials (3 minutes)

Step 7: Add Your Secret Keys

🔒 This keeps your credentials secure and private!

🖥️ In Apps Script, go to Code.gs
📜 Scroll to the very bottom
➕ Add this function at the end:

function setupMyConfig() {
  const scriptProps = PropertiesService.getScriptProperties();
  
  scriptProps.setProperties({
    'VISION_API_KEY': 'PASTE_YOUR_API_KEY_HERE',
    'DRIVE_FOLDER_ID': 'PASTE_YOUR_FOLDER_ID_HERE',
    'SPREADSHEET_ID': 'PASTE_YOUR_SPREADSHEET_ID_HERE'
  });
  
  Logger.log('✅ Configuration saved!');
}

📋 Replace the three placeholder values with YOUR actual IDs from your notepad
💾 Click Save

Run the Setup:

🎯 In the function dropdown at top, select setupMyConfig
▶️ Click Run (the play button)
🔐 A popup appears: “Authorization required”
🔵 Click Review permissions
👤 Choose your Google account
⚠️ Click Advanced → Go to DAM Tool (unsafe)
- Don’t worry! It’s safe - Google marks all custom scripts this way
✅ Click Allow
⏳ Wait for it to run (5-10 seconds)
📊 Click Execution log (bottom) - you should see: “✅ Configuration saved!”
🗑️ DELETE the entire setupMyConfig function (important for security!)
💾 Click Save

Update Code to Use Secure Config

📜 Scroll to the top of Code.gs
🔍 Find the CONFIG section (around line 13)
🔄 Replace it with this:

const CONFIG = {
  VISION_API_KEY: PropertiesService.getScriptProperties().getProperty('VISION_API_KEY'),
  DRIVE_FOLDER_ID: PropertiesService.getScriptProperties().getProperty('DRIVE_FOLDER_ID'),
  SPREADSHEET_ID: PropertiesService.getScriptProperties().getProperty('SPREADSHEET_ID'),
  SHEET_NAME: 'Assets',
  SUPPORTED_TYPES: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/bmp']
};

💾 Click Save

✅ Checkpoint: Your credentials are now stored securely!

🧪 Part 8: Test It Works (2 minutes)

Step 8: Quick Test

🎯 In the function dropdown, select syncFromInterface
▶️ Click Run
⏳ Wait 10-15 seconds
📊 Click Execution log (bottom panel)
✅ You should see: { success: true, count: 3 } (or however many images you uploaded)

Check Your Sheet:

🔙 Go back to your Google Sheet tab
🔄 Refresh the page
🎉 You should see a new sheet tab called “Assets”
📋 Click it - your images are listed!

✅ Checkpoint: Your images are synced to the sheet!

🚀 Part 9: Deploy Your Web App (3 minutes)

Step 9a: Create Deployment

🔙 Go back to Apps Script tab
🚀 Click Deploy → New deployment
⚙️ Click the gear icon next to “Select type”
🌐 Select Web app
⚙️ Configure settings:
- 📝 Description: “DAM Tool v1”
- 🔧 Execute as: Me (your-email@gmail.com)
- 🌍 Who has access: Anyone
🚀 Click Deploy
⏳ Wait 10 seconds
📋 CRITICAL: Copy the entire Web app URL
- Looks like: https://script.google.com/macros/s/AKfycby.../exec
- Click Copy button
- Or select all and Ctrl+C / Cmd+C
📝 Paste it in your notepad!
✅ Click Done

Step 9b: Connect the Frontend

🖥️ In Apps Script, click DAMTool.html (left sidebar)
🔍 Press Ctrl+F / Cmd+F to open Find
🔎 Search for: const baseUrl = '';

📋 Paste your deployment URL between the quotes:

const baseUrl = 'https://script.google.com/macros/s/AKfycby.../exec';

💾 Click Save

Step 9c: Redeploy with Updated URL

⚠️ IMPORTANT - Don’t skip this!

🚀 Click Deploy → Manage deployments
✏️ Click the Edit icon (pencil) next to your deployment
🔄 Under “Version”, click New version
📝 Description: “Added deployment URL”
🚀 Click Deploy
✅ Click Done

✅ Checkpoint: Your web app is deployed and connected!

🎉 Part 10: Launch Your DAM Tool! (2 minutes)

Step 10: Open Your App

📋 Get your Web app URL from your notepad
🌐 Open a new browser tab
📋 Paste the URL and press Enter
🎨 Your DAM Tool loads!

First-Time Setup:

🔄 Click the 🔄 Sync button
- Status shows: “Synced! Found 3 assets” ✅
🔙 Go back to your Google Sheet tab
🧩 In the menu bar, you’ll see: 🎨 DAM Tool
📋 Click 🎨 DAM Tool → 🏷️ Tag All Assets
⏳ Wait 30-60 seconds (AI is tagging your images!)
✅ Popup: “Tagged 3 assets!”
🔙 Go back to your web app tab
🔄 Click 🔄 Sync again (refreshes the tags)

Try Searching:

🔍 In the search box, type a word related to your images
- Examples: “person”, “nature”, “blue”, “outdoor”
🔎 Click 🔍 Search
🎉 Your images appear as thumbnails!
🖱️ Hover over any image - you’ll see “⬇ Download”
🖱️ Click any image - it downloads instantly!

🎊 Congratulations! You’re Done!

🌟 What You Built:

✅ AI-powered image search engine
✅ Automatic tagging with Google Cloud Vision
✅ Beautiful visual gallery interface
✅ One-click downloads
✅ Two-way sync with Google Drive
✅ 100% FREE using Google’s free tier!

📌 Pro Tips:

💾 Bookmark your Web app URL - that’s your personal DAM Tool!

📸 Add more images:

Upload to your Drive folder
Open web app
Click 🔄 Sync
Go to Sheet → 🎨 DAM Tool → 🏷️ Tag All Assets
Back to web app → 🔄 Sync
Search away!

🔒 Keep it secure:

Never share your API key
Your credentials are safely stored in Script Properties
Your deployment URL is private (only you can use it)

🎨 Customize it:

Change colors in the CSS
Modify the search logic
Add more features!

🆘 Troubleshooting

❌ “No assets found”

Check: Did you upload images to the Drive folder?
Check: Did you click Sync in the web app?
Solution: Upload images, then click Sync

❌ “Error: Invalid response format”

Check: Did you paste the deployment URL in DAMTool.html?
Check: Did you redeploy after adding the URL?
Solution: Go back to Step 9b and 9c

❌ Search returns nothing

Check: Did you run “Tag All Assets” from the Sheet menu?
Check: Are the tags actually in column G of your sheet?
Solution: Sheet → 🎨 DAM Tool → 🏷️ Tag All Assets

❌ “You do not have permission”

Check: Did you run the authorization in Step 7?
Solution: Apps Script → Select any function → Run → Allow permissions

🐛 Still stuck?

Open browser console (F12) and check for errors
Check Apps Script Execution Log
Open a GitHub issue with screenshots

📚 How It Works

┌─────────────────┐
│  Google Drive   │  ← You upload images here
│   (Storage)     │
└────────┬────────┘
         │
         ↓ Sync
┌─────────────────┐
│ Google Sheets   │  ← Metadata database
│  (Database)     │
└────────┬────────┘
         │
         ↓ Cloud Vision API
┌─────────────────┐
│  AI Tagging     │  ← Generates tags automatically
│   (Vision API)  │
└────────┬────────┘
         │
         ↓ Search
┌─────────────────┐
│  Web Interface  │  ← You search and download here
│   (DAMTool)     │
└─────────────────┘

🛡️ Security Checklist

✅ API keys stored in Script Properties (not in code)
✅ Credentials never committed to GitHub
✅ API key restricted to Cloud Vision API only
✅ Web app runs under your account (not public scripts)
✅ All data stays in YOUR Google account

🎯 Next Steps

🚀 Share it:

Deploy for your team
Each person needs their own setup (15 min each)

🎨 Customize it:

Fork the repo
Modify colors, layout, features
Submit pull requests!

💡 Extend it:

Add more file types
Integrate with other tools
Build a mobile interface

📞 Support & Community

💬 Questions? Open a GitHub Issue
🐛 Found a bug? Submit a Pull Request
⭐ Like it? Star the repo!
🎉 Share it! Help others find it

📄 License

MIT License - Free to use and modify!

### 🎨 Made with 💜 by Kwitykwity **[GitHub](https://github.com/kwitykwity)** • **[Live Demo](https://kwitykwity.github.io/DAMTool/)** • **[Report Issue](https://github.com/kwitykwity/DAMTool/issues)** ⭐ **Star this repo if it helped you!** ⭐

This site is open source. Improve this page.