<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Telegram Image Generator Bot</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.telegram-btn {
background-color: #0088cc;
transition: all 0.3s;
}
.telegram-btn:hover {
background-color: #006699;
}
.preview-box {
border: 2px dashed #cbd5e0;
min-height: 300px;
background-color: #f8fafc;
}
.command-box {
background-color: #edf2f7;
border-left: 4px solid #4299e1;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-gray-800 mb-2">Telegram Image Generator Bot</h1>
<p class="text-gray-600">Create custom images directly from Telegram with our bot</p>
</div>
<div class="flex flex-col lg:flex-row gap-8">
<!-- Bot Information Section -->
<div class="w-full lg:w-1/3 bg-white p-6 rounded-lg shadow-md">
<div class="flex items-center gap-4 mb-6">
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center">
<i class="fab fa-telegram text-3xl text-blue-500"></i>
</div>
<div>
<h2 class="text-xl font-semibold text-gray-800">ImageGenBot</h2>
<p class="text-gray-600">@ImageGeneratorBot</p>
</div>
</div>
<div class="mb-6">
<h3 class="text-sm font-medium text-gray-700 mb-2">How to use:</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-600">
<li>Start a chat with @ImageGeneratorBot</li>
<li>Send <code>/start</code> to begin</li>
<li>Use commands to generate images</li>
<li>Download or share your creations</li>
</ol>
</div>
<a href="https://t.me/ImageGeneratorBot" target="_blank" class="w-full telegram-btn hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center gap-2">
<i class="fab fa-telegram"></i> Open in Telegram
</a>
</div>
<!-- Commands and Preview Section -->
<div class="w-full lg:w-2/3">
<div class="bg-white p-6 rounded-lg shadow-md mb-6">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Available Commands</h2>
<div class="space-y-4">
<div class="p-4 rounded-md command-box">
<div class="font-mono font-semibold text-blue-600 mb-1">/create [text]</div>
<p class="text-gray-600">Generate an image with your text on a colored background</p>
</div>
<div class="p-4 rounded-md command-box">
<div class="font-mono font-semibold text-blue-600 mb-1">/meme [top text]|[bottom text]</div>
<p class="text-gray-600">Create a meme with top and bottom text</p>
</div>
<div class="p-4 rounded-md command-box">
<div class="font-mono font-semibold text-blue-600 mb-1">/quote [your quote]</div>
<p class="text-gray-600">Generate an inspirational quote image</p>
</div>
<div class="p-4 rounded-md command-box">
<div class="font-mono font-semibold text-blue-600 mb-1">/color [hex color] [text]</div>
<p class="text-gray-600">Create image with custom background color</p>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Example Output</h2>
<div class="preview-box rounded-md flex items-center justify-center p-4">
<img id="preview-image" src="https://via.placeholder.com/400x200?text=Your+Image+Will+Appear+Here" alt="Generated image preview" class="max-w-full h-auto rounded-md shadow-sm">
</div>
</div>
</div>
</div>
<!-- PHP Backend Explanation -->
<div class="mt-12 bg-white p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 mb-4">PHP Backend Implementation</h2>
<div class="bg-gray-800 rounded-md p-4 mb-6 overflow-x-auto">
<pre class="text-gray-200 text-sm"><code>
<?php
// Set your Telegram bot token
$telegramBotToken = 'YOUR_BOT_TOKEN';
// Get the incoming update from Telegram
$update = json_decode(file_get_contents('php://input'), true);
// Check if this is a valid message
if (isset($update['message'])) {
$chatId = $update['message']['chat']['id'];
$messageText = $update['message']['text'];
// Handle commands
if (strpos($messageText, '/start') === 0) {
sendMessage($chatId, "Welcome to Image Generator Bot! Use /create, /meme, /quote or /color commands to generate images.");
}
elseif (strpos($messageText, '/create') === 0) {
$text = trim(substr($messageText, 7));
if (empty($text)) {
sendMessage($chatId, "Please provide text after /create command");
} else {
$imageUrl = generateTextImage($text);
sendPhoto($chatId, $imageUrl);
}
}
elseif (strpos($messageText, '/meme') === 0) {
$parts = explode('|', trim(substr($messageText, 5)));
if (count($parts) < 2) {
sendMessage($chatId, "Please provide top and bottom text separated by |");
} else {
$imageUrl = generateMemeImage($parts[0], $parts[1]);
sendPhoto($chatId, $imageUrl);
}
}
// Add other command handlers here...
}
// Function to generate text image
function generateTextImage($text) {
// Create a blank image
$image = imagecreatetruecolor(800, 400);
// Allocate colors
$bgColor = imagecolorallocate($image, rand(50, 200), rand(50, 200), rand(50, 200));
$textColor = imagecolorallocate($image, 255, 255, 255);
// Fill background
imagefilledrectangle($image, 0, 0, 800, 400, $bgColor);
// Add text
$font = 'arial.ttf'; // Make sure to have the font file
imagettftext($image, 36, 0, 50, 200, $textColor, $font, $text);
// Save image to temporary file
$filename = tempnam(sys_get_temp_dir(), 'telegram_img') . '.png';
imagepng($image, $filename);
imagedestroy($image);
return $filename;
}
// Function to send message
function sendMessage($chatId, $text) {
global $telegramBotToken;
$url = "https://api.telegram.org/bot$telegramBotToken/sendMessage";
$data = [
'chat_id' => $chatId,
'text' => $text
];
file_get_contents($url . '?' . http_build_query($data));
}
// Function to send photo
function sendPhoto($chatId, $photoPath) {
global $telegramBotToken;
$url = "https://api.telegram.org/bot$telegramBotToken/sendPhoto";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
$photo = new CURLFile($photoPath);
curl_setopt($ch, CURLOPT_POSTFIELDS, [
'chat_id' => $chatId,
'photo' => $photo
]);
curl_exec($ch);
curl_close($ch);
// Clean up
unlink($photoPath);
}
?>
</code></pre>
</div>
<div class="space-y-4">
<div class="p-4 bg-blue-50 rounded-md">
<h3 class="font-semibold text-blue-800 mb-2">How to Set Up:</h3>
<ol class="list-decimal list-inside space-y-1 text-gray-700">
<li>Create a new bot with @BotFather on Telegram</li>
<li>Get your bot token</li>
<li>Upload this PHP script to your web server</li>
<li>Set the webhook URL in Telegram API: <code>https://api.telegram.org/botYOUR_TOKEN/setWebhook?url=https://yourdomain.com/yourscript.php</code></li>
<li>Start chatting with your bot!</li>
</ol>
</div>
<div class="p-4 bg-yellow-50 rounded-md">
<h3 class="font-semibold text-yellow-800 mb-2">Requirements:</h3>
<ul class="list-disc list-inside space-y-1 text-gray-700">
<li>PHP 7.0 or higher</li>
<li>GD library installed for image generation</li>
<li>SSL certificate (HTTPS) for webhook</li>
<li>Write permissions in temporary directory</li>
</ul>
</div>
</div>
</div>
</div>
<script>
// This is just for demo purposes - in a real implementation, the PHP would handle Telegram updates
document.addEventListener('DOMContentLoaded', function() {
// Simulate different image generation commands
const commands = [
{ cmd: '/create Hello World', img: 'https://via.placeholder.com/800x400/3b82f6/ffffff?text=Hello+World' },
{ cmd: '/meme Top Text|Bottom Text', img: 'https://via.placeholder.com/800x400/ef4444/ffffff?text=Top+Text' },
{ cmd: '/quote Be the change', img: 'https://via.placeholder.com/800x400/10b981/ffffff?text=Be+the+change' },
{ cmd: '/color #8b5cf6 Purple', img: 'https://via.placeholder.com/800x400/8b5cf6/ffffff?text=Purple' }
];
// Rotate through example images
let currentIndex = 0;
const previewImage = document.getElementById('preview-image');
setInterval(() => {
currentIndex = (currentIndex + 1) % commands.length;
previewImage.src = commands[currentIndex].img;
previewImage.alt = commands[currentIndex].cmd;
}, 3000);
});
</script>
</body>
</html>