Hugging Face's logo

Spaces:
praspey
/
unity-nlp-architect-wizard
Running

App Files Community
unity-nlp-architect-wizard / docs.html
praspey's picture
praspey
create a Unity NLP Architect
a417501 verified
Raw History Blame Contribute Delete
12.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documentation | Unity NLP Architect</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<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>
<style>
.sidebar {
scrollbar-width: thin;
scrollbar-color: #7c3aed transparent;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background-color: #7c3aed;
border-radius: 3px;
}
.code-block {
font-family: 'Courier New', monospace;
background: rgba(0,0,0,0.7);
}
.active-nav {
background: rgba(124, 58, 237, 0.2);
border-left: 3px solid #7c3aed;
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<!-- Navigation -->
<nav class="bg-gray-800 bg-opacity-80 backdrop-blur-md fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="code" class="text-purple-400 h-6 w-6"></i>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="index.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="docs.html" class="bg-purple-800 text-white px-3 py-2 rounded-md text-sm font-medium">Docs</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">API</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Unity Bridge</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
<i data-feather="download" class="mr-2 h-4 w-4"></i> Get Started
</button>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<div class="pt-20 flex">
<!-- Sidebar -->
<div class="hidden md:block w-64 bg-gray-800 bg-opacity-70 h-screen sticky top-16 overflow-y-auto sidebar">
<div class="p-4">
<div class="mb-8">
<h3 class="text-xs font-semibold text-purple-400 tracking-wider uppercase mb-4">Getting Started</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded active-nav">Introduction</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Installation</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Quick Start</a></li>
</ul>
</div>
<div class="mb-8">
<h3 class="text-xs font-semibold text-purple-400 tracking-wider uppercase mb-4">Core Concepts</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Natural Language Syntax</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Game Objects</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Components</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Physics</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">UI System</a></li>
</ul>
</div>
<div class="mb-8">
<h3 class="text-xs font-semibold text-purple-400 tracking-wider uppercase mb-4">Advanced</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Customizing Output</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Extending with Scripts</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Performance Optimization</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold text-purple-400 tracking-wider uppercase mb-4">Examples</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">2D Platformer</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">First Person Shooter</a></li>
<li><a href="#" class="text-gray-300 hover:text-white text-sm block py-2 px-3 rounded">Racing Game</a></li>
</ul>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-8">
<div class="max-w-3xl mx-auto">
<h1 class="text-3xl font-bold mb-6">Documentation</h1>
<p class="text-xl text-gray-300 mb-8">
Learn how to use Unity NLP Architect to build games with natural language commands.
</p>
<div class="mb-12">
<h2 class="text-2xl font-bold mb-4 text-purple-400 border-b border-gray-700 pb-2">Getting Started</h2>
<p class="text-gray-300 mb-6">
Unity NLP Architect is a powerful tool that translates your natural language descriptions into Unity game components. This guide will walk you through the installation and basic usage.
</p>
<div class="bg-gray-800 rounded-lg p-6 mb-6">
<h3 class="text-lg font-medium text-white mb-3">Installation</h3>
<p class="text-gray-300 mb-4">Install the Unity NLP Architect plugin via Unity Package Manager:</p>
<div class="code-block p-4 rounded-lg mb-4">
<p class="text-white">1. Open Unity Package Manager (Window > Package Manager)</p>
<p class="text-white">2. Click "+" and select "Add package from git URL..."</p>
<p class="text-white">3. Enter: https://github.com/unity-nlp-architect/package.git</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-6">
<h3 class="text-lg font-medium text-white mb-3">Basic Usage</h3>
<p class="text-gray-300 mb-4">After installation, open the NLP Architect window:</p>
<div class="code-block p-4 rounded-lg mb-4">
<p class="text-white">Window > NLP Architect > Open Architect Window</p>
</div>
<p class="text-gray-300 mb-4">Type your game description in natural language:</p>
<div class="code-block p-4 rounded-lg mb-4">
<p class="text-green-400">// Example input:</p>
<p class="text-white">"Create a 2D character that can move left and right with arrow keys and jump with space bar. Add gravity and ground detection."</p>
</div>
</div>
</div>
<div class="mb-12">
<h2 class="text-2xl font-bold mb-4 text-purple-400 border-b border-gray-700 pb-2">Natural Language Syntax</h2>
<p class="text-gray-300 mb-6">
The system understands a wide range of game development concepts expressed in natural language. Here are some common patterns:
</p>
<div class="space-y-6">
<div class="bg-gray-800 rounded-lg p-6">
<h3 class="text-lg font-medium text-white mb-3">Creating Objects</h3>
<p class="text-gray-300 mb-2">Examples:</p>
<ul class="list-disc list-inside text-gray-300 mb-4 space-y-1">
<li>"Create a player character"</li>
<li>"Add a red enemy that follows the player"</li>
<li>"Make a coin pickup with rotation animation"</li>
</ul>
</div>
<div class="bg-gray-800 rounded-lg p-6">
<h3 class="text-lg font-medium text-white mb-3">Movement and Physics</h3>
<p class="text-gray-300 mb-2">Examples:</p>
<ul class="list-disc list-inside text-gray-300 mb-4 space-y-1">
<li>"Make the player move with WASD keys"</li>
<li>"Add jumping with space bar"</li>
<li>"Implement gravity for all characters"</li>
</ul>
</div>
<div class="bg-gray-800 rounded-lg p-6">
<h3 class="text-lg font-medium text-white mb-3">Game Mechanics</h3>
<p class="text-gray-300 mb-2">Examples:</p>
<ul class="list-disc list-inside text-gray-300 mb-4 space-y-1">
<li>"When player touches coin, increase score by 10"</li>
<li>"If player health reaches 0, show game over screen"</li>
<li>"Create a power-up that doubles jump height for 5 seconds"</li>
</ul>
</div>
</div>
</div>
<div class="bg-purple-900 bg-opacity-20 rounded-lg p-6 border border-purple-700">
<div class="flex">
<div class="flex-shrink-0">
<i data-feather="alert-circle" class="h-6 w-6 text-purple-400"></i>
</div>
<div class="ml-3">
<h3 class="text-lg font-medium text-white mb-2">Pro Tip</h3>
<p class="text-gray-300">
Be as specific as possible in your descriptions. Instead of "make a character move," try "create a 2D character that moves left and right with arrow keys at speed 5."
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html>