468 lines
28 KiB
PHP
468 lines
28 KiB
PHP
<?php
|
||
require_once 'db/config.php';
|
||
$project_name = $_SERVER['PROJECT_NAME'] ?? 'AI Media Forge';
|
||
$project_description = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Generate unique AI photos and videos for free.';
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title><?php echo htmlspecialchars($project_name); ?></title>
|
||
<meta name="description" content="<?php echo htmlspecialchars($project_description); ?>">
|
||
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Google Fonts: Inter -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<!-- Font Awesome -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<!-- Custom CSS -->
|
||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||
<style>
|
||
.badge-ai { background: linear-gradient(45deg, #007bff, #6610f2); }
|
||
.badge-stock { background: #6c757d; }
|
||
.form-select, .form-control { border-radius: 8px; }
|
||
.btn-primary { border-radius: 8px; background: #000; border: none; }
|
||
.btn-primary:hover { background: #333; }
|
||
.card { border-radius: 16px; }
|
||
.editor-preview-container {
|
||
background: #1a1a1a;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 400px;
|
||
position: relative;
|
||
}
|
||
#editor-canvas {
|
||
max-width: 100%;
|
||
max-height: 60vh;
|
||
object-fit: contain;
|
||
}
|
||
.filter-control label {
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
color: #444;
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
}
|
||
.nav-pills .nav-link {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: #666;
|
||
border-radius: 8px;
|
||
padding: 8px 16px;
|
||
}
|
||
.nav-pills .nav-link.active {
|
||
background-color: #000;
|
||
color: #fff;
|
||
}
|
||
.ai-magic-box {
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
border: 1px solid #eee;
|
||
}
|
||
#editor-loading {
|
||
background: rgba(0,0,0,0.7);
|
||
z-index: 10;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-light">
|
||
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
|
||
<div class="container">
|
||
<a class="navbar-brand fw-bold" href="/">
|
||
<i class="fas fa-robot me-2"></i><?php echo htmlspecialchars($project_name); ?>
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto align-items-center">
|
||
<li class="nav-item"><a class="nav-link active" href="#">Генерация</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#history">История</a></li>
|
||
<li class="nav-item">
|
||
<button class="btn btn-outline-light btn-sm ms-lg-3" data-bs-toggle="modal" data-bs-target="#settingsModal">
|
||
<i class="fas fa-cog"></i> Настройки
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="container py-5">
|
||
<!-- Hero & Generator Section -->
|
||
<section class="row justify-content-center mb-5">
|
||
<div class="col-lg-10 text-center mb-4">
|
||
<h1 class="display-5 fw-bold text-dark mb-2">Создавайте ИИ-контент мгновенно</h1>
|
||
<p class="lead text-muted">Используйте мощные API для генерации уникальных изображений и видео по текстовому описанию.</p>
|
||
</div>
|
||
|
||
<div class="col-lg-12">
|
||
<div class="card border-0 shadow-lg overflow-hidden">
|
||
<div class="card-body p-0">
|
||
<div class="bg-white p-4 p-md-4 border-bottom">
|
||
<form id="generation-form">
|
||
<div class="row g-3">
|
||
<div class="col-md-3">
|
||
<label class="form-label small fw-bold text-uppercase">Тип контента</label>
|
||
<select class="form-select border-2" id="media-type" name="type">
|
||
<option value="photo">Изображение (Real AI)</option>
|
||
<option value="video">Видео</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3" id="video-provider-container" style="display: none;">
|
||
<label class="form-label small fw-bold text-uppercase">Провайдер</label>
|
||
<select class="form-select border-2" id="video-provider" name="video_provider">
|
||
<option value="pexels">Сток (Всегда Бесплатно)</option>
|
||
<option value="ai">ИИ (Требуется Ключ)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<label class="form-label small fw-bold text-uppercase">Стиль</label>
|
||
<select class="form-select border-2" id="style" name="style">
|
||
<option value="">Без стиля</option>
|
||
<option value="anime">Аниме</option>
|
||
<option value="realism">Реализм</option>
|
||
<option value="cyberpunk">Киберпанк</option>
|
||
<option value="vaporwave">Вейпорвейв</option>
|
||
<option value="pixel-art">Пиксель-арт</option>
|
||
<option value="fantasy">Фэнтези</option>
|
||
<option value="3d-render">3D Рендер</option>
|
||
<option value="steampunk">Стимпанк</option>
|
||
<option value="oil-painting">Масляная живопись</option>
|
||
<option value="sketch">Скетч</option>
|
||
<option value="pop-art">Поп-арт</option>
|
||
<option value="minimalism">Минимализм</option>
|
||
<option value="cinematic">Кинематографичный</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<label class="form-label small fw-bold text-uppercase">Формат</label>
|
||
<select class="form-select border-2" id="aspect_ratio" name="aspect_ratio">
|
||
<option value="1:1">1:1 Квадрат</option>
|
||
<option value="16:9">16:9 Широкий</option>
|
||
<option value="9:16">9:16 Вертикаль</option>
|
||
<option value="4:3">4:3 Классик</option>
|
||
<option value="3:2">3:2 Фото</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label class="form-label small fw-bold text-uppercase">Ваш запрос</label>
|
||
<input type="text" class="form-control border-2" id="prompt" name="prompt" placeholder="Например: 'Космонавт на лошади'..." required>
|
||
</div>
|
||
<div class="col-md-2 d-flex align-items-end">
|
||
<button type="submit" class="btn btn-primary w-100 fw-bold py-2" id="generate-btn">
|
||
Создать
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="result-preview" class="bg-dark position-relative" style="min-height: 500px; display: flex; align-items: center; justify-content: center;">
|
||
<div class="text-center text-secondary" id="placeholder-text">
|
||
<i class="fas fa-wand-magic-sparkles fa-3x mb-3 d-block"></i>
|
||
<p>Ваше творение появится здесь</p>
|
||
</div>
|
||
|
||
<div class="loading-spinner text-center d-none" id="loading-state">
|
||
<div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem;">
|
||
<span class="visually-hidden">Loading...</span>
|
||
</div>
|
||
<p class="mt-3 text-light fw-medium">Магия ИИ в процессе...</p>
|
||
<small class="text-muted d-block mt-2">Генерация может занять некоторое время</small>
|
||
</div>
|
||
|
||
<div id="content-container" class="d-none w-100 h-100 p-3 text-center">
|
||
<!-- Generated content will be injected here -->
|
||
</div>
|
||
|
||
<!-- Info Overlay -->
|
||
<div id="info-overlay" class="position-absolute top-0 start-0 p-3 d-none">
|
||
<span class="badge badge-ai shadow-sm" id="provider-badge"></span>
|
||
</div>
|
||
|
||
<!-- Action Overlay -->
|
||
<div id="action-buttons" class="position-absolute bottom-0 end-0 p-3 d-none d-flex gap-2">
|
||
<button class="btn btn-warning btn-sm shadow-sm d-none" id="edit-btn">
|
||
<i class="fas fa-magic me-1"></i> Редактировать
|
||
</button>
|
||
<button class="btn btn-light btn-sm shadow-sm" id="download-btn">
|
||
<i class="fas fa-download me-1"></i> Скачать
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="status-message" class="mt-3 alert alert-info d-none" role="alert">
|
||
<!-- Status/Warning messages go here -->
|
||
</div>
|
||
|
||
<div class="mt-4 text-center">
|
||
<p class="small text-muted">
|
||
<i class="fas fa-info-circle me-1"></i>
|
||
Генерация <strong>фото</strong> работает без ключа. Для <strong>видео через ИИ</strong> нужен бесплатный ключ <a href="#" data-bs-toggle="modal" data-bs-target="#settingsModal">RapidAPI</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- History & Gallery Section -->
|
||
<section id="history" class="py-5">
|
||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||
<h2 class="h3 fw-bold mb-0">Недавние генерации</h2>
|
||
</div>
|
||
|
||
<div class="row g-4" id="history-grid">
|
||
<?php
|
||
try {
|
||
$stmt = db()->query("SELECT * FROM media_history ORDER BY created_at DESC LIMIT 6");
|
||
$history = $stmt->fetchAll();
|
||
if ($history):
|
||
foreach ($history as $item):
|
||
?>
|
||
<div class="col-md-4 col-sm-6">
|
||
<div class="card h-100 border-0 shadow-sm history-card">
|
||
<div class="position-relative">
|
||
<?php if ($item['type'] === 'photo'): ?>
|
||
<img src="<?php echo htmlspecialchars($item['result_url']); ?>" class="card-img-top history-img" data-url="<?php echo htmlspecialchars($item['result_url']); ?>" alt="AI result" style="height: 250px; object-fit: contain; background: #222;">
|
||
<?php else: ?>
|
||
<div class="bg-dark d-flex align-items-center justify-content-center" style="height: 250px;">
|
||
<video class="w-100 h-100" style="object-fit: contain;" muted onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
|
||
<source src="<?php echo htmlspecialchars($item['result_url']); ?>" type="video/mp4">
|
||
</video>
|
||
<i class="fas fa-play position-absolute text-white opacity-50"></i>
|
||
</div>
|
||
<?php endif; ?>
|
||
<span class="badge bg-dark position-absolute top-0 end-0 m-2 opacity-75">
|
||
<?php echo $item['type'] === 'photo' ? 'PHOTO' : 'VIDEO'; ?>
|
||
</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="card-text small text-truncate mb-2 fw-medium"><?php echo htmlspecialchars($item['prompt']); ?></p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted"><?php echo date('d.m, H:i', strtotime($item['created_at'])); ?></small>
|
||
<div>
|
||
<?php if ($item['type'] === 'photo'): ?>
|
||
<button class="btn btn-outline-warning btn-sm border-0 history-edit-btn" data-url="<?php echo htmlspecialchars($item['result_url']); ?>">
|
||
<i class="fas fa-magic"></i>
|
||
</button>
|
||
<?php endif; ?>
|
||
<a href="<?php echo htmlspecialchars($item['result_url']); ?>" target="_blank" class="btn btn-link btn-sm p-0 text-decoration-none ms-1">Открыть <i class="fas fa-external-link-alt ms-1 small"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php
|
||
endforeach;
|
||
else:
|
||
echo '<div class="col-12 text-center py-5 text-muted"><p>История пуста. Создайте что-нибудь!</p></div>';
|
||
endif;
|
||
} catch (Exception $e) {
|
||
echo '<div class="col-12 text-center py-5 text-danger"><p>Ошибка загрузки истории.</p></div>';
|
||
}
|
||
?>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Photo Editor Modal -->
|
||
<div class="modal fade" id="editorModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||
<div class="modal-content border-0 shadow">
|
||
<div class="modal-header bg-dark text-white border-0">
|
||
<h5 class="modal-title fw-bold"><i class="fas fa-magic me-2"></i> Nano Editor AI</h5>
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body p-0">
|
||
<div class="row g-0">
|
||
<!-- Preview Area -->
|
||
<div class="col-lg-8">
|
||
<div class="editor-preview-container p-3 h-100">
|
||
<canvas id="editor-canvas"></canvas>
|
||
<!-- Loading Overlay for AI edits -->
|
||
<div id="editor-loading" class="position-absolute top-0 start-0 w-100 h-100 d-none flex-column align-items-center justify-content-center text-white">
|
||
<div class="spinner-border text-primary mb-3" role="status"></div>
|
||
<span class="fw-bold">Применяем ИИ магию...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Controls Area -->
|
||
<div class="col-lg-4 border-start">
|
||
<div class="p-4 overflow-auto" style="max-height: 80vh;">
|
||
|
||
<ul class="nav nav-pills mb-4 justify-content-center" id="editor-tabs" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link active" id="filters-tab" data-bs-toggle="pill" data-bs-target="#filters-panel" type="button" role="tab">Фильтры</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="ai-magic-tab" data-bs-toggle="pill" data-bs-target="#ai-magic-panel" type="button" role="tab">ИИ Магия</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="tab-content" id="editor-tab-content">
|
||
<!-- Filters Panel -->
|
||
<div class="tab-pane fade show active" id="filters-panel" role="tabpanel">
|
||
<h6 class="fw-bold mb-4 text-uppercase small letter-spacing-1">Настройки фильтров</h6>
|
||
|
||
<div class="filter-control mb-4">
|
||
<label>Яркость</label>
|
||
<input type="range" class="form-range filter-range" data-filter="brightness" min="0" max="200" value="100">
|
||
</div>
|
||
|
||
<div class="filter-control mb-4">
|
||
<label>Контраст</label>
|
||
<input type="range" class="form-range filter-range" data-filter="contrast" min="0" max="200" value="100">
|
||
</div>
|
||
|
||
<div class="filter-control mb-4">
|
||
<label>Насыщенность</label>
|
||
<input type="range" class="form-range filter-range" data-filter="saturate" min="0" max="200" value="100">
|
||
</div>
|
||
|
||
<div class="filter-control mb-4">
|
||
<label>Чёрно-белое</label>
|
||
<input type="range" class="form-range filter-range" data-filter="grayscale" min="0" max="100" value="0">
|
||
</div>
|
||
|
||
<div class="filter-control mb-4">
|
||
<label>Сепия</label>
|
||
<input type="range" class="form-range filter-range" data-filter="sepia" min="0" max="100" value="0">
|
||
</div>
|
||
|
||
<div class="filter-control mb-4">
|
||
<label>Инверсия</label>
|
||
<input type="range" class="form-range filter-range" data-filter="invert" min="0" max="100" value="0">
|
||
</div>
|
||
|
||
<div class="filter-control mb-4">
|
||
<label>Размытие</label>
|
||
<input type="range" class="form-range filter-range" data-filter="blur" min="0" max="20" value="0">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI Magic Panel -->
|
||
<div class="tab-pane fade" id="ai-magic-panel" role="tabpanel">
|
||
<h6 class="fw-bold mb-3 text-uppercase small letter-spacing-1">Умное редактирование</h6>
|
||
|
||
<div class="ai-magic-box mb-4">
|
||
<label class="form-label small fw-bold mb-2">Что изменить на фото?</label>
|
||
<textarea class="form-control mb-2" id="ai-edit-prompt" rows="3" placeholder="Например: 'Добавь коту корону' или 'Сделай фон в стиле киберпанк'"></textarea>
|
||
<button class="btn btn-primary btn-sm w-100 fw-bold" id="apply-ai-magic">
|
||
<i class="fas fa-sparkles me-1"></i> Применить магию
|
||
</button>
|
||
</div>
|
||
|
||
<div class="d-grid gap-2">
|
||
<button class="btn btn-outline-dark btn-sm" id="remove-bg-btn">
|
||
<i class="fas fa-eraser me-1"></i> Удалить фон (ИИ)
|
||
</button>
|
||
<button class="btn btn-outline-dark btn-sm" id="upscale-btn">
|
||
<i class="fas fa-expand me-1"></i> Улучшить качество
|
||
</button>
|
||
</div>
|
||
|
||
<div class="alert alert-info mt-4 small border-0 py-2">
|
||
<i class="fas fa-lightbulb me-2"></i> ИИ анализирует фото и перерисовывает его согласно вашим пожеланиям.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-4">
|
||
|
||
<div class="d-grid gap-2">
|
||
<button class="btn btn-outline-danger btn-sm mb-2" id="reset-filters">
|
||
<i class="fas fa-undo me-1"></i> Сбросить всё
|
||
</button>
|
||
<button class="btn btn-dark fw-bold" id="save-edited-btn">
|
||
<i class="fas fa-download me-1"></i> Скачать результат
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Modal -->
|
||
<div class="modal fade" id="settingsModal" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||
<div class="modal-content border-0 shadow">
|
||
<div class="modal-header border-0">
|
||
<h5 class="modal-title fw-bold">Настройки API</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body p-4">
|
||
<div class="mb-4">
|
||
<label class="form-label small fw-bold">Ваш X-RapidAPI-Key</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text border-2"><i class="fas fa-key"></i></span>
|
||
<input type="password" class="form-control border-2" id="rapidapi-key-input" placeholder="Введите ваш ключ...">
|
||
</div>
|
||
<div class="form-text mt-2 text-muted">
|
||
Этот ключ хранится только в вашем браузере.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert alert-light border">
|
||
<h6 class="fw-bold mb-3">Где получить бесплатный ключ для видео?</h6>
|
||
<p class="small mb-3">Зарегистрируйтесь на <a href="https://rapidapi.com/" target="_blank">RapidAPI</a> и подпишитесь на один из этих бесплатных планов (Free Tier):</p>
|
||
<div class="list-group list-group-flush small">
|
||
<a href="https://rapidapi.com/novita-ai-novita-ai-default/api/novita-ai" target="_blank" class="list-group-item list-group-item-action py-3 px-0 border-0">
|
||
<div class="d-flex w-100 justify-content-between">
|
||
<h6 class="mb-1 fw-bold">1. Novita AI</h6>
|
||
<span class="badge bg-success">Рекомендуется</span>
|
||
</div>
|
||
<p class="mb-1">Мощная генерация видео и фото.</p>
|
||
</a>
|
||
<a href="https://rapidapi.com/moat-io-moat-io-default/api/text-to-video2" target="_blank" class="list-group-item list-group-item-action py-3 px-0 border-0">
|
||
<div class="d-flex w-100 justify-content-between">
|
||
<h6 class="mb-1 fw-bold">2. Moat Text-to-Video</h6>
|
||
</div>
|
||
<p class="mb-1">Хорошая база бесплатных генераций в день.</p>
|
||
</a>
|
||
<a href="https://rapidapi.com/pictory-pictory-default/api/pictory" target="_blank" class="list-group-item list-group-item-action py-3 px-0 border-0">
|
||
<div class="d-flex w-100 justify-content-between">
|
||
<h6 class="mb-1 fw-bold">3. Pictory AI</h6>
|
||
</div>
|
||
<p class="mb-1">Генерация видео из текста (более длинные ролики).</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer border-0">
|
||
<button type="button" class="btn btn-dark w-100 py-2 fw-bold" data-bs-dismiss="modal">Сохранить настройки</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="bg-white py-5 border-top mt-5">
|
||
<div class="container text-center">
|
||
<p class="text-muted mb-0">© <?php echo date('Y'); ?> <?php echo htmlspecialchars($project_name); ?></p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-light text-dark border">PHP <?php echo PHP_VERSION; ?></span>
|
||
<span class="badge bg-light text-dark border">Flux AI</span>
|
||
<span class="badge bg-light text-dark border">RapidAPI Ready</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Bootstrap 5 JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<!-- Main JS -->
|
||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||
</body>
|
||
</html>
|