Spaces:

gusfischer
/

labmem

Running

App Files Files Community

gusfischer commited on Oct 29, 2024

Commit

e6c70f5

verified ·

1 Parent(s): e55bbc1

Upload all files

Browse files

Files changed (20) hide show

sb1-adugtr/.bolt/config.json +3 -0
sb1-adugtr/.bolt/prompt +8 -0
sb1-adugtr/.gitignore +24 -0
sb1-adugtr/eslint.config.js +28 -0
sb1-adugtr/index.html +13 -0
sb1-adugtr/package-lock.json +0 -0
sb1-adugtr/package.json +33 -0
sb1-adugtr/postcss.config.js +6 -0
sb1-adugtr/public/labmem-logo.png +19 -0
sb1-adugtr/src/App.tsx +50 -0
sb1-adugtr/src/components/DeviceCard.tsx +102 -0
sb1-adugtr/src/data/devices.ts +39 -0
sb1-adugtr/src/index.css +3 -0
sb1-adugtr/src/main.tsx +10 -0
sb1-adugtr/src/vite-env.d.ts +1 -0
sb1-adugtr/tailwind.config.js +8 -0
sb1-adugtr/tsconfig.app.json +24 -0
sb1-adugtr/tsconfig.json +7 -0
sb1-adugtr/tsconfig.node.json +22 -0
sb1-adugtr/vite.config.ts +7 -0

sb1-adugtr/.bolt/config.json ADDED Viewed

	@@ -0,0 +1,3 @@

+{
+  "template": "bolt-vite-react-ts"
+}

sb1-adugtr/.bolt/prompt ADDED Viewed

	@@ -0,0 +1,8 @@

+For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
+By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
+Use icons from lucide-react for logos.
+Use stock photos from unsplash where appropriate, only valid URLs you know exist. Do not download the images, only link to them in image tags.

sb1-adugtr/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

sb1-adugtr/eslint.config.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

sb1-adugtr/index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

sb1-adugtr/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

sb1-adugtr/package.json ADDED Viewed

	@@ -0,0 +1,33 @@

+{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

sb1-adugtr/postcss.config.js ADDED Viewed

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

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

sb1-adugtr/public/labmem-logo.png ADDED Viewed

sb1-adugtr/src/App.tsx ADDED Viewed

	@@ -0,0 +1,50 @@

+import React, { useEffect, useState } from 'react';
+import { DeviceCard } from './components/DeviceCard';
+import { devices } from './data/devices';
+import { RefreshCw } from 'lucide-react';
+function App() {
+  const [currentDevice, setCurrentDevice] = useState(devices[0]);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const getRandomDevice = () => {
+    const randomIndex = Math.floor(Math.random() * devices.length);
+    return devices[randomIndex];
+  };
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    setTimeout(() => {
+      setCurrentDevice(getRandomDevice());
+      setIsRefreshing(false);
+    }, 500);
+  };
+  useEffect(() => {
+    setCurrentDevice(getRandomDevice());
+  }, []);
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-pink-50">
+      <div className="container mx-auto px-4 py-16">
+        <div className="flex justify-end mb-8">
+          <button
+            onClick={handleRefresh}
+            className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-md hover:shadow-lg transition-all text-purple-600"
+          >
+            <RefreshCw className={`w-5 h-5 ${isRefreshing ? 'animate-spin' : ''}`} />
+            Generate New Device
+          </button>
+        </div>
+        <DeviceCard device={currentDevice} />
+        <footer className="mt-16 text-center text-gray-500 text-sm">
+          Retro-Futuristic Media Device Generator © {new Date().getFullYear()}
+        </footer>
+      </div>
+    </div>
+  );
+}
+export default App;

sb1-adugtr/src/components/DeviceCard.tsx ADDED Viewed

	@@ -0,0 +1,102 @@

+import React from 'react';
+import { type Device } from '../data/devices';
+import { Disc, Radio, Zap, ExternalLink, Instagram } from 'lucide-react';
+interface DeviceCardProps {
+  device: Device;
+}
+export function DeviceCard({ device }: DeviceCardProps) {
+  const getEncodedPrompt = () => encodeURIComponent(device.prompt);
+  return (
+    <div className="max-w-4xl mx-auto bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 transform transition-all hover:scale-[1.02]">
+      <div className="flex items-center gap-4 mb-6">
+        <div className="p-3 bg-purple-100 rounded-full">
+          <Disc className="w-8 h-8 text-purple-600" />
+        </div>
+        <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+          {device.name}
+        </h1>
+      </div>
+      <div className="grid md:grid-cols-2 gap-8">
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Zap className="w-5 h-5 text-purple-600" />
+              <h2 className="text-xl font-semibold text-gray-800">AI Image Prompt</h2>
+            </div>
+            <p className="text-gray-600 leading-relaxed">
+              {device.prompt}
+            </p>
+          </div>
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Radio className="w-5 h-5 text-purple-600" />
+              <h2 className="text-xl font-semibold text-gray-800">Influenced By</h2>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {device.influences.map((influence) => (
+                <span
+                  key={influence}
+                  className="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm"
+                >
+                  {influence}
+                </span>
+              ))}
+            </div>
+          </div>
+          <div className="space-y-4">
+            <h2 className="text-xl font-semibold text-gray-800">Try this prompt on:</h2>
+            <div className="flex gap-3">
+              <a
+                href={`https://www.bing.com/images/create?q=${getEncodedPrompt()}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-4 py-2 bg-[#00a4ef] text-white rounded-lg hover:bg-[#0078d4] transition-colors"
+              >
+                Bing Image Creator
+                <ExternalLink className="w-4 h-4" />
+              </a>
+              <a
+                href={`https://ideogram.ai/t/search?q=${getEncodedPrompt()}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-4 py-2 bg-[#ff4545] text-white rounded-lg hover:bg-[#e03c3c] transition-colors"
+              >
+                Ideogram
+                <ExternalLink className="w-4 h-4" />
+              </a>
+              <a
+                href={`https://leonardo.ai`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-4 py-2 bg-[#000000] text-white rounded-lg hover:bg-gray-800 transition-colors"
+              >
+                Leonardo.AI
+                <ExternalLink className="w-4 h-4" />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-4">
+          <div className="flex flex-col items-center justify-center p-8 bg-black rounded-xl">
+            <img
+              src="/labmem-logo.png"
+              alt="LABMEM Logo"
+              className="w-48 h-auto"
+            />
+            <div className="flex items-center gap-2 mt-4 text-white">
+              <Instagram className="w-4 h-4" />
+              <p className="text-sm">This is a @lab.mem project, follow us on instagram</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

sb1-adugtr/src/data/devices.ts ADDED Viewed

	@@ -0,0 +1,39 @@

+export interface Device {
+  name: string;
+  prompt: string;
+  influences: string[];
+  image: string;
+}
+export const devices: Device[] = [
+  {
+    name: "HoloVinyl Player",
+    prompt: "A transparent floating turntable that projects holographic album artwork while playing vinyl records, with floating neon controls and anti-gravity record storage system, retro-futuristic design with chrome accents",
+    influences: ["Traditional Turntable", "LaserDisc Player", "Sony Walkman"],
+    image: "https://images.unsplash.com/photo-1461360370896-922624d12aa1?auto=format&fit=crop&q=80&w=2874"
+  },
+  {
+    name: "MemoryTape Echo",
+    prompt: "A cassette player that can extract and visualize memories stored in special crystal tapes, featuring bio-luminescent indicators and vapor-wave aesthetic with pearl white casing",
+    influences: ["Cassette Walkman", "MiniDisc Player", "Polaroid Camera"],
+    image: "https://images.unsplash.com/photo-1594022766835-58fae16e23c8?auto=format&fit=crop&q=80&w=2960"
+  },
+  {
+    name: "Neural Rhythm Box",
+    prompt: "A brain-wave activated music device with floating crystalline spheres that pulse with light in rhythm, featuring organic curves and bioluminescent touch panels",
+    influences: ["iPod", "Transistor Radio", "Boombox"],
+    image: "https://images.unsplash.com/photo-1626128665085-483747621778?auto=format&fit=crop&q=80&w=2940"
+  },
+  {
+    name: "Quantum Soundscape Generator",
+    prompt: "A device that creates music by sampling sounds from parallel universes, with retrofuturistic vacuum tubes, geometric patterns, and a time-window display",
+    influences: ["Reel-to-Reel Player", "Synthesizer", "Radio Receiver"],
+    image: "https://images.unsplash.com/photo-1558483819-2781de708c72?auto=format&fit=crop&q=80&w=2940"
+  },
+  {
+    name: "AetherWave Transmitter",
+    prompt: "A steampunk-inspired device that broadcasts music through aether waves, featuring brass dials, crystal resonators, and mechanical butterfly animations",
+    influences: ["Gramophone", "Telegraph", "Tube Radio"],
+    image: "https://images.unsplash.com/photo-1511379938547-c1f69419868d?auto=format&fit=crop&q=80&w=2940"
+  }
+];

sb1-adugtr/src/index.css ADDED Viewed

	@@ -0,0 +1,3 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

sb1-adugtr/src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

sb1-adugtr/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

sb1-adugtr/tailwind.config.js ADDED Viewed

	@@ -0,0 +1,8 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

sb1-adugtr/tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

sb1-adugtr/tsconfig.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

sb1-adugtr/tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

sb1-adugtr/vite.config.ts ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});