Kt - URL Shortener + AI Assistant

A modern URL shortener with integrated AI chat assistant powered by Hugging Face and custom bot verification.

Features

✨ URL Shortening - Create custom short links 🤖 AI Assistant - Chat with Hugging Face AI models 🔐 Bot Verification - Custom math challenge to verify humans 🎨 Modern UI - Dark theme with gradient styling

Setup

1. Get Hugging Face API Key

1. Visit https://huggingface.co/settings/tokens
2. Create a new token with read access
3. Copy the token

2. Frontend Only (Recommended for quick start)

1. Edit ai-chat.html line 156:

const HF_API_KEY = "hf_YOUR_HUGGING_FACE_API_KEY"; // Paste your token here

2. Open ai-chat.html in browser or add link in navbar

3. With Backend Server (For production)

Install Dependencies

npm install

Configure Environment

cp .env.example .env
# Edit .env and add your Hugging Face API key

Run Server

npm start
# Server runs on http://localhost:3000

Endpoints

Verification Flow

• POST /api/verify - Get math challenge
• POST /api/verify-answer - Verify answer & get token
• POST /api/chat - Send message to AI (requires token)

Bot Detection

• POST /api/detect-bot - Analyze user patterns
• GET /api/health - Check server status

Models Available

Use any of these Hugging Face models:

// Conversational AI
'microsoft/DialoGPT-medium' // Good for chat
'facebook/blenderbot-400M-distill' // Friendly conversations

// General text generation  
'gpt2' // Simple, fast
'EleutherAI/gpt-neo-125M' // Larger model

// Custom fine-tuned model
'your-username/your-model-name' // Your own model

Bot Verification How It Works

1. User visits chat → Shown math challenge
2. User solves → Gets verification token
3. Token stored → In localStorage
4. Token verified → On each message to AI
5. Patterns checked → User agent, response time, message length

Security Considerations

🔐 Frontend: Tokens expire after 5 minutes 🔐 Backend: Server-side verification required 🔐 API Key: Never expose in frontend (use backend for production) 🔐 Rate limiting: Add in production 🔐 Input validation: Sanitize all inputs

File Structure

.
├── index.html           # Main URL shortener
├── ai-chat.html         # AI chat interface (frontend)
├── api-server.js        # Backend server (optional)
├── style.css            # Styling
├── package.json         # Node dependencies
├── .env.example         # Environment template
└── README.md            # This file

Quick Links

• 🔗 URL Shortener
• 🤖 AI Chat
• 📖 Hugging Face Docs
• 💬 Available Models

Example Usage

HTML/JavaScript (Frontend)

// Get challenge
fetch('/api/verify').then(r => r.json()).then(data => {
  console.log(data.question); // "15 + 23 = ?"
});

// Verify answer
fetch('/api/verify-answer', {
  method: 'POST',
  body: JSON.stringify({
    challengeId: data.challengeId,
    answer: 38
  })
}).then(r => r.json()).then(data => {
  localStorage.setItem('token', data.token);
});

// Chat with token
fetch('/api/chat', {
  method: 'POST',
  headers: {
    'x-verification-token': localStorage.getItem('token')
  },
  body: JSON.stringify({ message: 'Hello!' })
});

Troubleshooting

"Model is loading"

• Hugging Face needs to load model on first request (can take 30s)

"API rate limit exceeded"

• Free tier has limits. Upgrade or use different model

"Verification token invalid"

• Clear localStorage and refresh: localStorage.clear()

"CORS error"

• Use backend server instead of direct frontend calls

License

MIT - Feel free to use and modify

---

Made with ❤️ by Kit-Url