Spaces:

aiqwen
/

bannercraft-ai-studio

Running

App Files Files Community

aiqwen commited on Nov 9

Commit

a23e89f

verified ·

1 Parent(s): ce981e9

селай сервис по создпнии баннера с помощью ии - прислается полный текст поста, затем ии анализирует и выдает на выбор варианты заголовка, затем после выбора заголовка автоматически подстраивается и делается задний фон который подходит по теме и делается в виде градиентного R 248

Browse files

G 216
B 72 ---
R 248
G 216
B 72 ---- задний фон делается на все рабочее пронстранство ----- затем автоматически делается подсчет подходящих картинок и делается веб поиск каринок - затем дается выбор какие элементы должны быьть --- после выбора с низ удаляется задий фон и делается белый контур (можно все редактировать в настройках) ---в процессе можно редактировать все жлементы - размеры увета градиетны положение прозрачность толщини контура логотип и вообще все ----- рабочее пронстранство - 16:9 ---с права все элементы в виде слоев которые можно перемящить меняя слои , нажимать на редактирование (что над слоями появляется овно редактирования элемента) - справа все элементы набора - --- также кнопка эеспорта полной картинки в виде пнг --- --- сделай все очень красиво ---

Files changed (5) hide show

README.md +8 -5
components/header.js +6 -0
index.html +111 -19
script.js +274 -0
style.css +106 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Bannercraft Ai Studio
-emoji: 🏃
-colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: BannerCraft AI Studio
+colorFrom: pink
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/header.js ADDED Viewed

	@@ -0,0 +1,6 @@

+class HeaderBanner extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host

index.html CHANGED Viewed

@@ -1,19 +1,111 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BannerCraft AI Studio</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <header-banner></header-banner>
+    <div class="flex flex-col lg:flex-row h-screen">
+        <!-- Main Content Area -->
+        <main class="flex-1 p-6 overflow-auto">
+            <div class="max-w-6xl mx-auto">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <!-- Input Panel -->
+                    <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-6">
+                        <h2 class="text-xl font-bold text-gray-800 mb-4">Create Your Banner</h2>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Post Content</label>
+                                <textarea id="postContent" class="w-full h-32 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent" placeholder="Paste your post content here..."></textarea>
+                            </div>
+                            <button id="analyzeBtn" class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-white font-semibold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
+                                <i data-feather="zap" class="mr-2"></i> Analyze with AI
+                            </button>
+                            <!-- Headline Selection -->
+                            <div id="headlineSection" class="hidden">
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Select Headline</label>
+                                <div id="headlineOptions" class="space-y-2">
+                                    <!-- Headlines will be inserted here -->
+                                </div>
+                            </div>
+                            <!-- Image Search Results -->
+                            <div id="imageSearchSection" class="hidden">
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Choose Background Image</label>
+                                <div id="imageResults" class="grid grid-cols-2 gap-2 max-h-60 overflow-y-auto">
+                                    <!-- Images will be inserted here -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Canvas Preview -->
+                    <div class="lg:col-span-2">
+                        <div class="bg-white rounded-xl shadow-lg p-6 h-full">
+                            <div class="flex justify-between items-center mb-4">
+                                <h2 class="text-xl font-bold text-gray-800">Banner Preview</h2>
+                                <button id="exportBtn" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg flex items-center">
+                                    <i data-feather="download" class="mr-2"></i> Export PNG
+                                </button>
+                            </div>
+                            <!-- Banner Canvas -->
+                            <div id="bannerCanvas" class="relative w-full aspect-video bg-gradient-to-br from-yellow-300 to-yellow-400 rounded-lg overflow-hidden border-4 border-white shadow-lg">
+                                <!-- Elements will be added here dynamically -->
+                                <div id="canvasElements" class="absolute inset-0">
+                                    <!-- Placeholder elements -->
+                                    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
+                                        <h3 class="text-3xl font-bold text-white drop-shadow-lg">Your Banner</h3>
+                                        <p class="text-white mt-2">Start creating with AI</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Element Controls -->
+                            <div id="elementControls" class="mt-4 hidden">
+                                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+                                    <button class="bg-blue-100 hover:bg-blue-200 text-blue-700 py-2 px-3 rounded-lg flex items-center justify-center">
+                                        <i data-feather="type" class="mr-1"></i> Text
+                                    </button>
+                                    <button class="bg-blue-100 hover:bg-blue-200 text-blue-700 py-2 px-3 rounded-lg flex items-center justify-center">
+                                        <i data-feather="image" class="mr-1"></i> Image
+                                    </button>
+                                    <button class="bg-blue-100 hover:bg-blue-200 text-blue-700 py-2 px-3 rounded-lg flex items-center justify-center">
+                                        <i data-feather="square" class="mr-1"></i> Shape
+                                    </button>
+                                    <button class="bg-blue-100 hover:bg-blue-200 text-blue-700 py-2 px-3 rounded-lg flex items-center justify-center">
+                                        <i data-feather="star" class="mr-1"></i> Logo
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <!-- Layers Panel -->
+        <aside-layers></aside-layers>
+    </div>
+    <!-- Web Components -->
+    <script src="components/header.js"></script>
+    <script src="components/aside-layers.js"></script>
+    <!-- Scripts -->
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,274 @@

+// Global state
+let currentState = {
+  postContent: '',
+  headlines: [],
+  selectedHeadline: null,
+  backgroundImage: null,
+  elements: [],
+  selectedElement: null
+};
+// DOM Elements
+const postContentEl = document.getElementById('postContent');
+const analyzeBtn = document.getElementById('analyzeBtn');
+const headlineSection = document.getElementById('headlineSection');
+const headlineOptions = document.getElementById('headlineOptions');
+const imageSearchSection = document.getElementById('imageSearchSection');
+const imageResults = document.getElementById('imageResults');
+const bannerCanvas = document.getElementById('bannerCanvas');
+const canvasElements = document.getElementById('canvasElements');
+const elementControls = document.getElementById('elementControls');
+const exportBtn = document.getElementById('exportBtn');
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+  setupEventListeners();
+});
+// Event Listeners
+function setupEventListeners() {
+  analyzeBtn.addEventListener('click', handleAnalyzeClick);
+  exportBtn.addEventListener('click', handleExportClick);
+  // Drag and drop for canvas elements
+  canvasElements.addEventListener('dragstart', handleDragStart);
+  canvasElements.addEventListener('dragover', handleDragOver);
+  canvasElements.addEventListener('drop', handleDrop);
+}
+// Handle Analyze Button Click
+async function handleAnalyzeClick() {
+  const content = postContentEl.value.trim();
+  if (!content) {
+    alert('Please enter some post content');
+    return;
+  }
+  currentState.postContent = content;
+  // Show loading state
+  analyzeBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Analyzing...';
+  feather.replace();
+  try {
+    // Simulate AI processing
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    // Generate sample headlines
+    currentState.headlines = [
+      "Transform Your Business Today",
+      "Unlock New Possibilities",
+      "Innovate Your Future",
+      "Discover Amazing Solutions",
+      "Elevate Your Brand"
+    ];
+    renderHeadlineOptions();
+    headlineSection.classList.remove('hidden');
+    // Simulate image search
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    renderImageResults();
+    imageSearchSection.classList.remove('hidden');
+  } catch (error) {
+    console.error('Analysis failed:', error);
+    alert('Analysis failed. Please try again.');
+  } finally {
+    analyzeBtn.innerHTML = '<i data-feather="zap" class="mr-2"></i> Analyze with AI';
+    feather.replace();
+  }
+}
+// Render Headline Options
+function renderHeadlineOptions() {
+  headlineOptions.innerHTML = '';
+  currentState.headlines.forEach((headline, index) => {
+    const headlineEl = document.createElement('div');
+    headlineEl.className = 'p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-yellow-50 transition';
+    headlineEl.innerHTML = `
+      <div class="font-medium">${headline}</div>
+    `;
+    headlineEl.addEventListener('click', () => selectHeadline(index));
+    headlineOptions.appendChild(headlineEl);
+  });
+}
+// Select Headline
+function selectHeadline(index) {
+  currentState.selectedHeadline = currentState.headlines[index];
+  // Update UI to show selection
+  const headlineItems = headlineOptions.querySelectorAll('div');
+  headlineItems.forEach((item, i) => {
+    if (i === index) {
+      item.classList.add('bg-yellow-100', 'border-yellow-400');
+    } else {
+      item.classList.remove('bg-yellow-100', 'border-yellow-400');
+    }
+  });
+  // Apply to canvas
+  updateCanvasWithHeadline();
+}
+// Render Image Results
+function renderImageResults() {
+  imageResults.innerHTML = '';
+  // Generate sample images
+  for (let i = 0; i < 6; i++) {
+    const imgEl = document.createElement('img');
+    imgEl.src = `http://static.photos/technology/320x240/${i + 1}`;
+    imgEl.alt = `Background option ${i + 1}`;
+    imgEl.className = 'rounded-lg cursor-pointer hover:opacity-80 transition';
+    imgEl.addEventListener('click', () => selectBackgroundImage(imgEl.src));
+    imageResults.appendChild(imgEl);
+  }
+}
+// Select Background Image
+function selectBackgroundImage(src) {
+  currentState.backgroundImage = src;
+  // Update canvas background
+  bannerCanvas.style.background = `linear-gradient(to bottom right, var(--primary-yellow), var(--secondary-yellow)), url('${src}')`;
+  bannerCanvas.style.backgroundSize = 'cover';
+  bannerCanvas.style.backgroundPosition = 'center';
+  // Show element controls
+  elementControls.classList.remove('hidden');
+  // Add sample elements
+  addSampleElements();
+}
+// Update Canvas with Headline
+function updateCanvasWithHeadline() {
+  // Clear previous headline
+  const existingHeadline = document.querySelector('.headline-element');
+  if (existingHeadline) {
+    existingHeadline.remove();
+  }
+  if (currentState.selectedHeadline) {
+    const headlineEl = document.createElement('div');
+    headlineEl.className = 'canvas-element headline-element absolute top-10 left-10 p-4 bg-white bg-opacity-90 rounded-lg shadow-lg';
+    headlineEl.draggable = true;
+    headlineEl.dataset.id = 'headline';
+    headlineEl.innerHTML = `
+      <h2 class="text-2xl font-bold text-gray-800">${currentState.selectedHeadline}</h2>
+    `;
+    headlineEl.addEventListener('click', () => selectElement('headline'));
+    canvasElements.appendChild(headlineEl);
+  }
+}
+// Add Sample Elements
+function addSampleElements() {
+  // Add logo
+  const logoEl = document.createElement('div');
+  logoEl.className = 'canvas-element absolute top-10 right-10 w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg';
+  logoEl.draggable = true;
+  logoEl.dataset.id = 'logo';
+  logoEl.innerHTML = `
+    <i data-feather="star" class="text-yellow-500"></i>
+  `;
+  logoEl.addEventListener('click', () => selectElement('logo'));
+  canvasElements.appendChild(logoEl);
+  // Add CTA button
+  const ctaEl = document.createElement('div');
+  ctaEl.className = 'canvas-element absolute bottom-10 left-10 px-6 py-3 bg-blue-600 text-white rounded-lg shadow-lg cursor-pointer hover:bg-blue-700 transition';
+  ctaEl.draggable = true;
+  ctaEl.dataset.id = 'cta';
+  ctaEl.innerHTML = `
+    <span class="font-semibold">Get Started</span>
+  `;
+  ctaEl.addEventListener('click', () => selectElement('cta'));
+  canvasElements.appendChild(ctaEl);
+  feather.replace();
+}
+// Select Element
+function selectElement(id) {
+  // Remove previous selections
+  document.querySelectorAll('.canvas-element').forEach(el => {
+    el.classList.remove('selected');
+  });
+  // Select new element
+  const element = document.querySelector(`.canvas-element[data-id="${id}"]`);
+  if (element) {
+    element.classList.add('selected');
+    currentState.selectedElement = id;
+    // Show element controls
+    showElementControls(element);
+  }
+}
+// Show Element Controls
+function showElementControls(element) {
+  // Remove existing controls
+  const existingControls = element.querySelector('.element-controls');
+  if (existingControls) existingControls.remove();
+  // Create controls
+  const controls = document.createElement('div');
+  controls.className = 'element-controls';
+  controls.innerHTML = `
+    <button class="control-btn" title="Move"><i data-feather="move"></i></button>
+    <button class="control-btn" title="Edit"><i data-feather="edit"></i></button>
+    <button class="control-btn" title="Delete"><i data-feather="trash-2"></i></button>
+  `;
+  element.appendChild(controls);
+  feather.replace();
+  // Add control event listeners
+  controls.querySelector('[title="Delete"]').addEventListener('click', (e) => {
+    e.stopPropagation();
+    element.remove();
+  });
+}
+// Drag and Drop Handlers
+function handleDragStart(e) {
+  if (e.target.classList.contains('canvas-element')) {
+    e.dataTransfer.setData('text/plain', e.target.dataset.id);
+    setTimeout(() => e.target.classList.add('dragging'), 0);
+  }
+}
+function handleDragOver(e) {
+  e.preventDefault();
+  e.dataTransfer.dropEffect = 'move';
+}
+function handleDrop(e) {
+  e.preventDefault();
+  const id = e.dataTransfer.getData('text/plain');
+  const element = document.querySelector(`.canvas-element[data-id="${id}"]`);
+  if (element) {
+    element.classList.remove('dragging');
+    // Calculate position relative to canvas
+    const rect = bannerCanvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    // Position element
+    element.style.left = `${x - element.offsetWidth / 2}px`;
+    element.style.top = `${y - element.offsetHeight / 2}px`;
+  }
+}
+// Handle Export
+function handleExportClick() {
+  alert('Export functionality would save your banner as PNG');
+  // In a real implementation, this would use html2canvas or similar
+}

style.css CHANGED Viewed

@@ -1,28 +1,116 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+  --primary-yellow: #f8d848;
+  --secondary-yellow: #f8c828;
+  --accent-blue: #3b82f6;
+  --light-gray: #f9fafb;
+  --dark-gray: #1f2937;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
 body {
+  background-color: var(--light-gray);
+  color: var(--dark-gray);
+}
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+  background: #c5c5c5;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #a0a0a0;
+}
+/* Canvas Elements */
+.canvas-element {
+  position: absolute;
+  cursor: move;
+  user-select: none;
+}
+.canvas-element.selected {
+  outline: 2px dashed #3b82f6;
+  outline-offset: 2px;
+}
+.element-controls {
+  position: absolute;
+  top: -35px;
+  left: 0;
+  display: flex;
+  gap: 5px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 5px;
+  border-radius: 6px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+.control-btn {
+  background: #f3f4f6;
+  border: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
 }
+.control-btn:hover {
+  background: #e5e7eb;
 }
+/* Layer Items */
+.layer-item {
+  transition: all 0.2s ease;
 }
+.layer-item:hover {
+  background-color: #f3f4f6;
 }
+.layer-item.active {
+  background-color: #dbeafe;
+  border-left: 3px solid #3b82f6;
 }
+/* Responsive Adjustments */
+@media (max-width: 1024px) {
+  .layers-panel {
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 100vh;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    z-index: 50;
+  }
+  .layers-panel.open {
+    transform: translateX(0);
+  }
+}
+.dragging {
+  opacity: 0.5;
+  transform: scale(0.98);
+}