Hugging Face's logo

Spaces:
samu
/
schematic-drawing
Sleeping

App Files Community
schematic-drawing
File size: 3,622 Bytes 
7c7ef49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Schematic Generation AI</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
</head>
<body>
  <div class="app-container">
    <!-- Side Navigation -->
    <nav class="side-nav">
      <div class="nav-header">
        <h2>Generation Mode</h2>
      </div>
      <div class="nav-items">
        <button class="nav-item active" data-mode="text2img">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 5v14M5 12h14"/>
          </svg>
          Text to Image
        </button>
        <button class="nav-item" data-mode="img2img">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
            <path d="M3 15l6-6 9 9"/>
            <path d="M13 9l3-3 5 5"/>
          </svg>
          Image with Text
        </button>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
      <div class="content-area">
        <h1>Schematic Generation AI</h1>
        
        <!-- Text to Image Interface -->
        <section id="text2img" class="interface active">
          <div class="form-group">
            <div class="category-wrapper">
              <select id="category" class="category-select">
                <option value="">Select Engineering Category (Optional)</option>
              </select>
              <div id="categoryInfo" class="category-info"></div>
            </div>
            <textarea 
              id="prompt" 
              placeholder="Describe the schematic you want to generate..."
              rows="4"
            ></textarea>
            <button id="generate">Generate Schematic</button>
          </div>
          <div id="results"></div>
        </section>

        <!-- Image with Text Interface -->
        <section id="img2img" class="interface">
          <div class="form-group">
            <div class="file-input-wrapper">
              <input type="file" id="inputImage" accept="image/*">
              <label for="inputImage">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                  <polyline points="17 8 12 3 7 8"/>
                  <line x1="12" y1="3" x2="12" y2="15"/>
                </svg>
                <span>Choose an image or drag & drop here</span>
              </label>
            </div>
            <div class="category-wrapper">
              <select id="imageCategory" class="category-select">
                <option value="">Select Engineering Category (Optional)</option>
              </select>
              <div id="imageCategoryInfo" class="category-info"></div>
            </div>
            <textarea 
              id="imagePrompt" 
              placeholder="Optional: Describe any modifications or specific requirements..."
              rows="3"
            ></textarea>
            <button id="generateWithImage">Generate Modified Schematic</button>
          </div>
          <div id="resultsImg"></div>
        </section>
      </div>

      <!-- Results Panel -->
      <div id="resultsPanel" class="results-panel"></div>
    </main>
  </div>
  <script src="script.js"></script>
</body>
</html>