🛠️ Guide: Setting Up a Hugging Face API with Freemium Access on Squarespace

— — —

website and datasets: https://www.grandmasboylabs.com/

— — —

🧩 Overview

You’ll be:

• Hosting a fine-tuned Hugging Face model (✅ assuming already done)
• Creating a ChatGPT-like web interface on Squarespace
• Using a middleware API server to protect your Hugging Face token
• Restricting access to free vs premium users

🚦 Part 1: Prepare Your Hugging Face Model

✅ You’ve already:

• Fine-tuned and deployed your model as an Inference Endpoint
• Tested it with Python locally

🌐 Part 2: Create a Middleware API (to protect your token)

Why? Squarespace doesn’t let you run backend Python. You need a small server that your Squarespace site can safely call without exposing your Hugging Face token.

✅ Option: Python (Flask) API on Replit (Free & Fast)

# app.py
from flask import Flask, request, jsonify
import requests
import os

app = Flask(__name__)

HF_API_TOKEN = os.environ.get("HF_API_TOKEN")
HF_ENDPOINT = "your endpoint"

@app.route("/ask", methods=["POST"])
def ask():
    data = request.json
    user_input = data.get("input")

    headers = {
        "Authorization": f"Bearer {HF_API_TOKEN}",
        "Content-Type": "application/json"
    }

    payload = {
        "inputs": user_input,
        "parameters": {
            "max_new_tokens": 150,
            "temperature": 0.7
        }
    }

    response = requests.post(HF_ENDPOINT, headers=headers, json=payload)
    return jsonify(response.json())

if __name__ == "__main__":
    app.run()

🔑 Environment Variables:

In Replit or Render:

• HF_API_TOKEN: Your Hugging Face API token (keep this secret)

💸 Part 3: Add Freemium Access Control

You have two access levels:

🟢 Free Tier

• Limited daily usage
• Rate-limited or limited to public-facing endpoint

🟣 Premium Tier

• Requires login or secret code
• Unlocks full access to the middleware API

🛠️ Implementing Freemium Options:

Option A: Password-protected form

1. In Squarespace, add a form block.
2. Include a field like “Access Code”
3. In your JavaScript, check the code before calling the middleware

Option B: Add Auth in Middleware

In your Flask middleware:

@app.route("/ask", methods=["POST"])
def ask():
    access_code = request.headers.get("X-ACCESS-CODE")
    if access_code != os.environ.get("PREMIUM_ACCESS_CODE"):
        return jsonify({"error": "Unauthorized"}), 403

Then you distribute that code to paying users only.

💬 Part 4: Add ChatGPT-Style Interface on Squarespace

Squarespace lets you add HTML + JavaScript via a “Code” block or embed block.

Paste this in a Code Block:

Squarespace lets you add HTML + JavaScript via a “Code” block or embed block.

Paste this in a Code Block:

<div id="chatbox" style="max-width: 600px; margin: auto;"></div>
<textarea id="userInput" rows="3" style="width: 100%;"></textarea>
<button onclick="sendMessage()">Send</button>

<script>
const API_URL = "https://your-middleware-api.replit.app/ask"; // replace this

async function sendMessage() {
  const input = document.getElementById("userInput").value;
  const chatbox = document.getElementById("chatbox");

  chatbox.innerHTML += `<p><strong>You:</strong> ${input}</p>`;

  const res = await fetch(API_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-ACCESS-CODE": "FREE123" // optional for freemium
    },
    body: JSON.stringify({ input })
  });

  const data = await res.json();
  const output = data[0]?.generated_text || "Sorry, no response.";

  chatbox.innerHTML += `<p><strong>AI:</strong> ${output}</p>`;
  document.getElementById("userInput").value = "";
}
</script>

🎨 You can style it however you want using CSS or Squarespace’s built-in style editor.

🧾 Part 5: Accept Payments (for Premium Access)

You can use Squarespace’s built-in Members Area + Stripe features:

• Create a paid subscription plan
• Use it to distribute access codes to premium users via email or Member Page
• Or link to Gumroad/Ko-fi/Patreon to handle subscriptions and send codes manually

🛡️ Part 6: Monitor & Scale

• Monitor usage via your Hugging Face dashboard and middleware logs
• Set scale-to-zero to save cost when idle
• Add rate limits in your Flask server if needed

🚀 Optional Upgrades

• Add conversation history (chat memory)
• Add user accounts with Firebase/Auth0
• Add analytics to track usage by tier
• Deploy backend to AWS Lambda, Vercel, or Render for performance