a9f9003ad1
- Replace absolute aitbc.bubuit.net URLs with relative paths in documentation pages - Update markdown documentation links from /main/ to /master/ branch - Add system flow diagram references to component documentation pages - Remove redundant "Also available in Markdown" notices from HTML docs - Update Font Awesome CDN link in index.html - Simplify quick links section and remove unused tutorial/video guide plac
495 lines
14 KiB
HTML
495 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Marketplace Web - AITBC Documentation</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--primary-color: #2563eb;
|
||
--secondary-color: #1e40af;
|
||
--success-color: #10b981;
|
||
--text-dark: #1f2937;
|
||
--text-light: #6b7280;
|
||
--bg-light: #f9fafb;
|
||
--bg-white: #ffffff;
|
||
--border-color: #e5e7eb;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
line-height: 1.6;
|
||
color: var(--text-dark);
|
||
background: var(--bg-white);
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
header {
|
||
background: var(--text-dark);
|
||
color: white;
|
||
padding: 1rem 0;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 2rem;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: white;
|
||
text-decoration: none;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.breadcrumb {
|
||
padding: 1rem 0;
|
||
color: var(--text-light);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: var(--text-light);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.breadcrumb a:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.doc-header {
|
||
padding: 3rem 0;
|
||
background: var(--bg-light);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.doc-header h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.doc-header p {
|
||
font-size: 1.2rem;
|
||
color: var(--text-light);
|
||
max-width: 800px;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
background: #10b98120;
|
||
color: var(--success-color);
|
||
border-radius: 20px;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.content-section {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.content-section h2 {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 1.5rem;
|
||
color: var(--text-dark);
|
||
border-bottom: 2px solid var(--border-color);
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.content-section h3 {
|
||
font-size: 1.4rem;
|
||
margin: 2rem 0 1rem;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.content-section p {
|
||
margin-bottom: 1rem;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.content-section ul {
|
||
margin-bottom: 1rem;
|
||
padding-left: 2rem;
|
||
}
|
||
|
||
.content-section li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.tech-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.tech-item {
|
||
background: var(--bg-light);
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.tech-item strong {
|
||
display: block;
|
||
color: var(--primary-color);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
pre {
|
||
background: #1f2937;
|
||
color: #f9fafb;
|
||
padding: 1.5rem;
|
||
border-radius: 8px;
|
||
overflow-x: auto;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
code {
|
||
font-family: 'Courier New', Courier, monospace;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
pre code {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.back-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
margin-bottom: 2rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.back-button:hover {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.alert {
|
||
background: #dbeafe;
|
||
border: 1px solid #3b82f6;
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.alert-info {
|
||
background: #dbeafe;
|
||
border-color: #3b82f6;
|
||
color: #1e40af;
|
||
}
|
||
|
||
footer {
|
||
background: var(--text-dark);
|
||
color: white;
|
||
padding: 2rem 0;
|
||
text-align: center;
|
||
margin-top: 4rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.doc-header h1 {
|
||
font-size: 2rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<nav class="container">
|
||
<a href="../index.html" class="logo">AITBC</a>
|
||
<ul class="nav-links">
|
||
<li><a href="../index.html">Home</a></li>
|
||
<li><a href="index.html">Documentation</a></li>
|
||
<li><a href="mailto:aitbc@bubuit.net">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="container">
|
||
<!-- Breadcrumb -->
|
||
<div class="breadcrumb">
|
||
<a href="index.html">Documentation</a>
|
||
<span>›</span>
|
||
<a href="#">Components</a>
|
||
<span>›</span>
|
||
<span>Marketplace Web</span>
|
||
</div>
|
||
|
||
<!-- Back Button -->
|
||
<a href="components.html" class="back-button">
|
||
<i class="fas fa-arrow-left"></i>
|
||
Back to Components
|
||
</a>
|
||
|
||
<!-- Header -->
|
||
<div class="doc-header">
|
||
<h1><i class="fas fa-store"></i> Marketplace Web</h1>
|
||
<p>Vite/TypeScript marketplace with offer/bid functionality, stats dashboard, and mock/live data toggle. Production UI ready.</p>
|
||
<span class="status-badge">● Live</span>
|
||
</div>
|
||
|
||
<!-- Alert for markdown format -->
|
||
<div class="alert alert-info">
|
||
<i class="fas fa-info-circle"></i>
|
||
<strong>Documentation Format:</strong> <a href="https://gitea.bubuit.net/oib/aitbc/src/branch/master/docs/marketplace-web.md" target="_blank" style="color: #1e40af; text-decoration: underline;">View this documentation in markdown format</a> for easier contribution and version control.
|
||
</div>
|
||
|
||
<!-- Overview -->
|
||
<section class="content-section">
|
||
<h2>Overview</h2>
|
||
<p>The Marketplace Web is the primary interface for clients to submit AI compute jobs and for miners to offer their services. It provides a real-time trading platform with comprehensive job management and analytics.</p>
|
||
|
||
<h3>Key Features</h3>
|
||
<ul>
|
||
<li>Real-time job marketplace with offer/bid functionality</li>
|
||
<li>Interactive statistics dashboard</li>
|
||
<li>Mock/live data toggle for development</li>
|
||
<li>Responsive design for all devices</li>
|
||
<li>WebSocket integration for live updates</li>
|
||
<li>Wallet integration for seamless payments</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Technology Stack -->
|
||
<section class="content-section">
|
||
<h2>Technology Stack</h2>
|
||
<div class="tech-grid">
|
||
<div class="tech-item">
|
||
<strong>Framework</strong>
|
||
Vite 4.x
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>Language</strong>
|
||
TypeScript 5.x
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>UI</strong>
|
||
TailwindCSS + Headless UI
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>State Management</strong>
|
||
Zustand
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>Charts</strong>
|
||
Chart.js
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>WebSocket</strong>
|
||
Native WebSocket API
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>Icons</strong>
|
||
Lucide React
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Getting Started -->
|
||
<section class="content-section">
|
||
<h2>Getting Started</h2>
|
||
|
||
<h3>Prerequisites</h3>
|
||
<ul>
|
||
<li>Node.js 18+</li>
|
||
<li>npm or yarn</li>
|
||
</ul>
|
||
|
||
<h3>Installation</h3>
|
||
<pre><code># Clone the repository
|
||
git clone https://gitea.bubuit.net/oib/aitbc.git
|
||
cd aitbc/apps/marketplace-web
|
||
|
||
# Install dependencies
|
||
npm install
|
||
|
||
# Start development server
|
||
npm run dev
|
||
|
||
# Build for production
|
||
npm run build
|
||
|
||
# Preview production build
|
||
npm run preview</code></pre>
|
||
|
||
<h3>Environment Configuration</h3>
|
||
<pre><code># .env.local
|
||
VITE_API_URL=http://localhost:18000
|
||
VITE_WS_URL=ws://localhost:18001
|
||
VITE_NETWORK=mainnet
|
||
VITE_MOCK_DATA=false</code></pre>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section class="content-section">
|
||
<h2>Features</h2>
|
||
|
||
<h3>Job Marketplace</h3>
|
||
<ul>
|
||
<li>Submit AI compute jobs with custom parameters</li>
|
||
<li>Browse available miner offers</li>
|
||
<li>Real-time price discovery</li>
|
||
<li>Job history and tracking</li>
|
||
</ul>
|
||
|
||
<h3>Statistics Dashboard</h3>
|
||
<ul>
|
||
<li>Real-time network metrics</li>
|
||
<li>Job completion rates</li>
|
||
<li>GPU utilization charts</li>
|
||
<li>Price trends analysis</li>
|
||
</ul>
|
||
|
||
<h3>Wallet Integration</h3>
|
||
<ul>
|
||
<li>Connect wallet via private key or keystore</li>
|
||
<li>View balance and transaction history</li>
|
||
<li>Sign transactions for job submissions</li>
|
||
<li>Receipt verification</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- API Integration -->
|
||
<section class="content-section">
|
||
<h2>API Integration</h2>
|
||
|
||
<h3>Coordinator API</h3>
|
||
<pre><code>// Job submission
|
||
POST /v1/jobs
|
||
{
|
||
"type": "inference",
|
||
"prompt": "Your prompt here",
|
||
"model": "llama3.2:latest",
|
||
"max_price": "100aitbc"
|
||
}
|
||
|
||
// WebSocket for live updates
|
||
ws://localhost:18001/ws</code></pre>
|
||
|
||
<h3>Blockchain RPC</h3>
|
||
<pre><code>// Get transaction status
|
||
curl -X POST http://localhost:26657 \
|
||
-d '{
|
||
"jsonrpc": "2.0",
|
||
"method": "tx",
|
||
"params": ["0x..."]
|
||
}'</code></pre>
|
||
</section>
|
||
|
||
<!-- Development -->
|
||
<section class="content-section">
|
||
<h2>Development</h2>
|
||
|
||
<h3>Project Structure</h3>
|
||
<pre><code>marketplace-web/
|
||
├── src/
|
||
│ ├── components/ # Reusable UI components
|
||
│ ├── pages/ # Page components
|
||
│ ├── hooks/ # Custom React hooks
|
||
│ ├── stores/ # Zustand stores
|
||
│ ├── services/ # API services
|
||
│ ├── types/ # TypeScript definitions
|
||
│ └── utils/ # Utility functions
|
||
├── public/
|
||
├── package.json
|
||
└── vite.config.ts</code></pre>
|
||
|
||
<h3>Mock Data</h3>
|
||
<p>Toggle mock data mode for development without a running backend:</p>
|
||
<pre><code>// In .env.local
|
||
VITE_MOCK_DATA=true</code></pre>
|
||
|
||
<h3>Building for Production</h3>
|
||
<pre><code># Build optimized bundle
|
||
npm run build
|
||
|
||
# Output in dist/ directory
|
||
# Deploy to any static hosting service</code></pre>
|
||
</section>
|
||
|
||
<!-- Deployment -->
|
||
<section class="content-section">
|
||
<h2>Deployment</h2>
|
||
|
||
<h3>Docker Deployment</h3>
|
||
<pre><code># Build image
|
||
docker build -t aitbc/marketplace-web .
|
||
|
||
# Run with nginx
|
||
docker run -d \
|
||
-p 80:80 \
|
||
-e VITE_API_URL=http://api.aitbc.bubuit.net \
|
||
aitbc/marketplace-web</code></pre>
|
||
|
||
<h3>Environment Variables</h3>
|
||
<ul>
|
||
<li><code>VITE_API_URL</code> - Coordinator API endpoint</li>
|
||
<li><code>VITE_WS_URL</code> - WebSocket endpoint</li>
|
||
<li><code>VITE_NETWORK</code> - Network name (mainnet/testnet)</li>
|
||
<li><code>VITE_MOCK_DATA</code> - Enable/disable mock data</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Support -->
|
||
<section class="content-section">
|
||
<h2>Support</h2>
|
||
<p>For marketplace-specific issues:</p>
|
||
<ul>
|
||
<li>Check the <a href="full-documentation.html">issue tracker</a></li>
|
||
<li>Join our <a href="#">Discord</a></li>
|
||
<li>Contact: <a href="mailto:aitbc@bubuit.net">aitbc@bubuit.net</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2025 AITBC. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|