EDA respostory build with the clone from github

2026-05-16 00:04:28 +08:00
parent dcb3548651
commit 7ac8fed5f9
12 changed files with 1089 additions and 2 deletions
@@ -1,3 +1,2 @@
 # mxpic_EDA
-
-web application EDA building repository
+The EDA coding for the layout for optihk
@@ -0,0 +1,35 @@
+name: EC_SiN400_1310_1p0dB_L635_A0_QY_202604
+foundry: Silterra
+process: EMO1_2ML_Cu_RDL
+year: '2026'
+type: primitive
+dependency: None
+maturity: development
+tapeout_history:
+- run: Silterra_EMO1_2ML_Cu_RDL_2026_Q2
+  status: Pending testing
+center_wavelength: 1310
+version: 1.0
+designer: Qin Yue
+update_notes: New SiN edge couplers with high efficiency
+ports:
+  a1:
+    x: -642.6
+    y: 0.0
+    a: 180.0
+    width: 0.7
+  b0:
+    x: 0.0
+    y: 0.0
+    a: 0.0
+    width: None
+  a0:
+    x: 0.0
+    y: 0.0
+    a: 180.0
+    width: 0.0
+time: 20260505-170136
+box_size:
+- 646.0
+- 75.0
+file_size: 1.36 KB
@@ -0,0 +1,42 @@
+# backend/database.py
+import sqlite3
+import os
+from werkzeug.security import generate_password_hash
+
+# Save the database in the backend folder
+DB_FILE = os.path.join(os.path.dirname(__file__), "mxpic_data.db")
+
+def init_db():
+    conn = sqlite3.connect(DB_FILE)
+    cursor = conn.cursor()
+
+    # Create Users Table
+    cursor.execute('''
+        CREATE TABLE IF NOT EXISTS users (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            username TEXT UNIQUE NOT NULL,
+            password_hash TEXT NOT NULL
+        )
+    ''')
+    
+    # Insert a test user if the table is empty
+    cursor.execute("SELECT * FROM users WHERE username = 'admin'")
+    if not cursor.fetchone():
+        test_hash = generate_password_hash("123456")
+        cursor.execute("INSERT INTO users (username, password_hash) VALUES (?, ?)", ("admin", test_hash))
+        print("Test user created. Username: admin | Password: 123456")
+
+    conn.commit()
+    conn.close()
+
+def get_user(username):
+    conn = sqlite3.connect(DB_FILE)
+    cursor = conn.cursor()
+    cursor.execute("SELECT id, username, password_hash FROM users WHERE username = ?", (username,))
+    user = cursor.fetchone()
+    conn.close()
+    return user
+
+if __name__ == "__main__":
+    init_db()
+    print("Database initialized successfully.")
@@ -0,0 +1,17 @@
+level : 4
+
+root :  
+  - PDK_libs
+    - primitives
+      - directional_couplers
+      - edge_couplers
+      - crossings
+      - multimode_interferometers
+      - photodectors
+    - compotites
+      - MZIs
+    - electronics
+      - resistors
+      - capacitors
+    - others
+      - logos
@@ -0,0 +1,199 @@
+import os
+import yaml
+from collections import OrderedDict
+from flask import Flask, jsonify, send_from_directory, request, redirect, url_for, session, render_template
+from werkzeug.security import check_password_hash
+import database  # Imports the database.py you created earlier
+
+# --- Path Configurations ---
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+FRONTEND_DIR = os.path.join(BASE_DIR, '..', 'frontend')
+YML_PATH = os.path.join(BASE_DIR, 'directories.yaml')
+COMPS_ROOT = os.path.join(BASE_DIR, 'PDK_libs')
+
+# Initialize Flask, pointing to the frontend folder for HTML/CSS/JS
+app = Flask(__name__, template_folder=FRONTEND_DIR, static_folder=FRONTEND_DIR)
+app.secret_key = 'super_secret_mxpic_key' # Required for session management
+app.json.sort_keys = False  # Keep dictionary order
+
+# Ensure database tables exist when the server boots
+database.init_db()
+
+# --- YAML & PDK Parsing Helper Functions (Unchanged) ---
+def countSpaces(line):
+    """Count leading spaces (tab=4)."""
+    expanded = line.expandtabs(4)
+    return len(expanded) - len(expanded.lstrip(' '))
+
+def buildTree(filepath):
+    """Build nested tree from indented yaml."""
+    if not os.path.exists(filepath):
+        return OrderedDict()
+        
+    with open(filepath, 'r', encoding='utf-8') as f:
+        lines = f.readlines()
+
+    rootIdx = None
+    for i, line in enumerate(lines):
+        if line.strip().startswith('root') and ':' in line.strip():
+            rootIdx = i
+            break
+    if rootIdx is None:
+        return OrderedDict()
+
+    entries = []
+    for line in lines[rootIdx + 1:]:
+        stripped = line.strip()
+        if not stripped or stripped.startswith('#'):
+            continue
+        if stripped.startswith('- '):
+            spaceNum = countSpaces(line)
+            name = stripped[2:].strip()
+            if name.strip():
+                entries.append((spaceNum, name))
+
+    if not entries:
+        return OrderedDict()
+
+    minIndent = min(indent for indent, _ in entries)
+    nest = OrderedDict()
+    levelStack = [(minIndent - 1, nest)]
+
+    for spaceNum, name in entries:
+        while levelStack and levelStack[-1][0] >= spaceNum:
+            levelStack.pop()
+        parent = levelStack[-1][1]
+        child = OrderedDict()
+        parent[name] = child
+        levelStack.append((spaceNum, child))
+
+    return nest
+
+def findComps(baseDir):
+    """Scan component folders, return map of paths -> component info."""
+    compMap = {}
+    refDir = os.path.dirname(baseDir)
+    for root, dirs, files in os.walk(baseDir):
+        ymlFiles = [f for f in files if f.endswith('.yml')]
+        if ymlFiles:
+            parentDir = os.path.dirname(root)
+            relPath = os.path.relpath(parentDir, refDir)
+            parts = () if relPath == '.' else tuple(relPath.split(os.sep))
+            compName = os.path.basename(root)
+            compMap[parts] = {
+                'folder': compName,
+                'yml': ymlFiles[0]
+            }
+            dirs.clear()
+    return compMap
+
+def addCompsToTree(tree, compMap):
+    """Insert component nodes into the tree."""
+    for pathSeg, compItem in compMap.items():
+        compName = compItem['folder']
+        curNode = tree
+        try:
+            for seg in pathSeg:
+                curNode = curNode[seg]
+        except KeyError:
+            continue
+        curNode[compName] = OrderedDict({
+            "__type__": "component",
+            "__name__": compName,
+            "__yml__": compItem['yml']
+        })
+    return tree
+
+def readCompYaml(compName):
+    """Load YAML from component folder."""
+    for root, dirs, files in os.walk(COMPS_ROOT):
+        if os.path.basename(root) == compName:
+            dirs.clear()
+            ymlFiles = [f for f in files if f.endswith('.yml')]
+            if ymlFiles:
+                ymlPath = os.path.join(root, ymlFiles[0])
+                with open(ymlPath, 'r', encoding='utf-8') as f:
+                    return yaml.safe_load(f)
+    return None
+
+# --- AUTHENTICATION & PAGE ROUTES ---
+@app.route('/')
+def home():
+    """Route to login page, or bypass to dashboard if already authenticated."""
+    if 'user_id' in session:
+        return redirect(url_for('dashboard'))
+    return render_template('login.html')
+
+@app.route('/login', methods=['POST'])
+def login():
+    """Verify credentials against the database."""
+    username = request.form.get('username')
+    password = request.form.get('password')
+    
+    user = database.get_user(username)
+    
+    # Verify hash from database matches entered password
+    if user and check_password_hash(user[2], password):
+        session['user_id'] = user[0]
+        session['username'] = user[1]
+        return redirect(url_for('dashboard'))
+    else:
+        return render_template('login.html', error="Invalid username or password")
+
+@app.route('/dashboard')
+def dashboard():
+    """User project list."""
+    if 'user_id' not in session:
+        return redirect(url_for('home'))
+        
+    return render_template('dashboard.html', username=session['username'])
+
+@app.route('/canvas')
+def canvas():
+    """The main EDA editor."""
+    if 'user_id' not in session:
+        return redirect(url_for('home'))
+        
+    # Note: Ensure your old index.html is renamed to canvas.html in the frontend folder
+    return render_template('canvas.html')
+
+@app.route('/logout')
+def logout():
+    """Clear session and return to login."""
+    session.clear()
+    return redirect(url_for('home'))
+
+# --- API ROUTES (Library & Components) ---
+@app.route('/api/library')
+def getLib():
+    """Get library structure."""
+    tree = buildTree(YML_PATH)
+    if os.path.isdir(COMPS_ROOT):
+        compMap = findComps(COMPS_ROOT)
+        addCompsToTree(tree, compMap)
+    return jsonify(tree)
+
+@app.route('/api/component/<component_name>')
+def getComp(component_name):
+    """Return component YAML data."""
+    data = readCompYaml(component_name)
+    if data is None:
+        return jsonify({"error": "Component not found"}), 404
+    return jsonify(data)
+
+@app.route('/api/component/<component_name>/image')
+def getCompImg(component_name):
+    """Return first image in component folder."""
+    for root, dirs, files in os.walk(COMPS_ROOT):
+        if os.path.basename(root) == component_name:
+            dirs.clear()
+            for ext in ('.png', '.jpg', '.jpeg', '.svg'):
+                for f in files:
+                    if f.lower().endswith(ext):
+                        return send_from_directory(root, f)
+            break
+    return jsonify({"error": "No image found"}), 404
+
+if __name__ == '__main__':
+    print("Starting mxpic EDA Server on http://127.0.0.1:3000")
+    app.run(host='127.0.0.1', port=3000, debug=True)
@@ -0,0 +1,750 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{% raw %}
+
+<head>
+  <meta charset="UTF-8">
+  <title>Canvas with PDK Library – Component Name & Rotation</title>
+  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+  <script src="https://unpkg.com/reactflow@11/dist/umd/index.js" crossorigin></script>
+  <link rel="stylesheet" href="https://unpkg.com/reactflow@11/dist/style.css" />
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <style>
+    body,
+    html,
+    #root {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    details {
+      margin-left: 8px;
+    }
+
+    summary {
+      cursor: pointer;
+    }
+
+    .left-block {
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+
+    .left-block-header {
+      background: #e0e0e0;
+      padding: 6px 10px;
+      font-weight: bold;
+      font-size: 0.9em;
+      border-bottom: 1px solid #ccc;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .left-block-body {
+      padding: 8px 10px;
+      font-size: 0.85em;
+    }
+
+    .tree-folder summary {
+      font-weight: bold;
+    }
+
+    .right-block {
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+
+    .right-block-header {
+      background: #e0e0e0;
+      padding: 6px 10px;
+      font-weight: bold;
+      font-size: 0.9em;
+      border-bottom: 1px solid #ccc;
+    }
+
+    .right-block-body {
+      padding: 8px 10px;
+      font-size: 0.85em;
+    }
+
+    .placeholder-block {
+      border: 1px dashed #bbb;
+      padding: 8px;
+      color: #888;
+      font-size: 0.85em;
+      background: #f9f9f9;
+    }
+
+    .toggle-btn {
+      background: none;
+      border: none;
+      font-size: 1.8em;
+      cursor: pointer;
+      padding: 2px 4px;
+      line-height: 1;
+      border-radius: 3px;
+    }
+
+    .toggle-btn:hover {
+      background: #d0d0d0;
+    }
+
+    .component-leaf {
+      cursor: grab;
+      padding: 2px 4px;
+      margin-left: 20px;
+      word-break: break-all;
+      white-space: normal;
+    }
+
+    .component-leaf:hover {
+      background: #e6f7ff;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useEffect, useRef, useCallback, useMemo, memo } = React;
+    const {
+      ReactFlow,
+      ReactFlowProvider,
+      useNodesState,
+      useEdgesState,
+      Controls,
+      Background,
+      useReactFlow,
+      addEdge,
+      Handle,
+      Position,
+      useUpdateNodeInternals,
+    } = window.ReactFlow;
+
+    const RotatableNode = ({ id, data, selected }) => {
+      const updateNodeInternals = useUpdateNodeInternals();
+      useEffect(() => {
+        updateNodeInternals(id);
+      }, [data.rotation, updateNodeInternals, id]);
+
+      const baseHandleStyle = {
+        width: 14, height: 14,
+        background: '#555',
+        border: 'none',
+        borderRadius: '50%',
+      };
+      const leftTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(-50%, -50%)' };
+      const leftBottomPort = { ...baseHandleStyle, top: '76%', transform: 'translate(-50%, -50%)' };
+      const rightTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(50%, -50%)' };
+      const rightBottomPort = { ...baseHandleStyle, top: '76%', transform: 'translate(50%, -50%)' };
+
+      return (
+        <div style={{
+          padding: '10px 20px', border: '1px solid #333', borderRadius: 6,
+          background: '#fff', minWidth: 100, textAlign: 'center',
+          position: 'relative', transform: `rotate(${data.rotation || 0}deg)`,
+          transition: selected ? 'none' : 'transform 0.1s ease',
+          boxSizing: 'border-box',
+        }}>
+          <div>{data.componentDisplayName}</div>
+          <Handle type="source" position={Position.Left} id="port-lt-source" style={{ ...leftTopPort, zIndex: 10 }} />
+          <Handle type="target" position={Position.Left} id="port-lt-target" style={{ ...leftTopPort, zIndex: 5 }} />
+          <Handle type="source" position={Position.Left} id="port-lb-source" style={{ ...leftBottomPort, zIndex: 10 }} />
+          <Handle type="target" position={Position.Left} id="port-lb-target" style={{ ...leftBottomPort, zIndex: 5 }} />
+          <Handle type="source" position={Position.Right} id="port-rt-source" style={{ ...rightTopPort, zIndex: 10 }} />
+          <Handle type="target" position={Position.Right} id="port-rt-target" style={{ ...rightTopPort, zIndex: 5 }} />
+          <Handle type="source" position={Position.Right} id="port-rb-source" style={{ ...rightBottomPort, zIndex: 10 }} />
+          <Handle type="target" position={Position.Right} id="port-rb-target" style={{ ...rightBottomPort, zIndex: 5 }} />
+        </div>
+      );
+    };
+
+    const TreeNode = ({ name, children }) => {
+      if (children && children.__type__ === 'component') {
+        const componentName = children.__name__;
+        const handleDragStart = (event) => {
+          event.dataTransfer.setData('application/reactflow', componentName);
+          event.dataTransfer.effectAllowed = 'move';
+        };
+        return (
+          <div className="component-leaf" draggable onDragStart={handleDragStart}>
+            🔷 {name}
+          </div>
+        );
+      }
+
+      const hasChildren = children && Object.keys(children).length > 0;
+      return (
+        <details>
+          <summary className="tree-folder">
+            <span style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>📂 {name}</span>
+            </summary>
+          {hasChildren &&
+            Object.entries(children).map(([childName, childData]) => (
+              <TreeNode key={childName} name={childName} children={childData} />
+            ))
+          }
+        </details>
+      );
+    };
+
+    const LeftPanel = ({ library, treeKey, expanded, onToggle, treeRef, width }) => (
+    <aside style={{
+        width: width, background: '#f4f4f4', borderRight: '1px solid #ccc',
+        padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
+        boxSizing: 'border-box', overflowY: 'auto'
+      }}>
+        <div className="left-block">
+          <div className="left-block-header">
+            <span>PDK Libraries</span>
+            <button className="toggle-btn" onClick={onToggle} title={expanded ? 'Collapse all' : 'Expand all'}>
+              {expanded ? '▾' : '▸'}
+            </button>
+          </div>
+          <div className="left-block-body" style={{ maxHeight: '45vh', overflowY: 'auto' }} key={treeKey} ref={treeRef}>
+            {library && Object.keys(library).length > 0 ? (
+              Object.entries(library).map(([key, value]) => (
+                <TreeNode key={key} name={key} children={value} />
+              ))
+            ) : (
+              <p style={{ color: '#999' }}>Loading library...</p>
+            )}
+          </div>
+        </div>
+
+        <div className="left-block">
+          <div className="left-block-header">Routing selections</div>
+          <div className="left-block-body">
+            <ul style={{ paddingLeft: 20, margin: 0 }}>
+              <li>Single mode wires</li>
+              <li>Multi-mode wires</li>
+              <li>DC electrical wires</li>
+              <li>RF electrical wires</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="left-block" style={{ marginTop: 'auto' }}>
+          <div className="left-block-header">User info</div>
+          <div className="left-block-body">
+            <div>Name: XXXXXX</div>
+            <div>ID: 12345678</div>
+            <button disabled>Log out</button>
+          </div>
+        </div>
+      </aside>
+    );
+
+    const RightPanel = memo(({ selectedNode, width, onRenameComponent }) => {
+      const [componentData, setComponentData] = useState(null);
+      const [loading, setLoading] = useState(false);
+      const [enlarged, setEnlarged] = useState(null);
+      const { setNodes } = useReactFlow();
+      const [editingComponentName, setEditingComponentName] = useState(false);
+      const [tempComponentName, setTempComponentName] = useState('');
+      const [localX, setLocalX] = useState('');
+      const [localY, setLocalY] = useState('');
+      const [localRotation, setLocalRotation] = useState('');
+
+      useEffect(() => {
+        const nodeId = selectedNode?.id;
+        if (!nodeId) {
+          setComponentData(null);
+          setLoading(false);
+          return;
+        }
+        const compName = selectedNode?.data?.componentName;
+        if (!compName) {
+          setComponentData(null);
+          setLoading(false);
+          return;
+        }
+        if (componentData && componentData.name === compName && componentData.nodeId === nodeId) return;
+
+        setLoading(true);
+        fetch(`/api/component/${encodeURIComponent(compName)}`)
+          .then(r => r.json())
+          .then(data => {
+            setComponentData({ ...data, nodeId: nodeId, componentDisplayName: selectedNode.data.componentDisplayName || data.name });
+            setLoading(false);
+          })
+          .catch(() => setLoading(false));
+      }, [selectedNode?.id, selectedNode?.data?.componentName, selectedNode?.data?.componentDisplayName]);
+
+      useEffect(() => {
+        if (selectedNode) {
+          setLocalX(selectedNode.position.x.toFixed(3));
+          setLocalY(selectedNode.position.y.toFixed(3));
+          setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
+        }
+      }, [selectedNode?.position.x, selectedNode?.position.y, selectedNode?.data?.rotation, selectedNode?.id]);
+
+      const updatePosition = useCallback((id, axis, value) => {
+        const val = parseFloat(value);
+        if (isNaN(val)) return;
+        setNodes(nds => nds.map(n => n.id === id ? { ...n, position: { ...n.position, [axis]: val } } : n));
+      }, [setNodes]);
+
+      const updateRotation = useCallback((id, value) => {
+        const val = parseFloat(value);
+        if (isNaN(val)) return;
+        const clamped = Math.min(180, Math.max(-180, val));
+        setNodes(nds => nds.map(n => n.id === id ? { ...n, data: { ...n.data, rotation: clamped } } : n));
+      }, [setNodes]);
+
+      const formatPort = (port) => {
+        if (!port) return '—';
+        return `x:${port.x ?? '?'}, y:${port.y ?? '?'}, a:${port.a ?? '?'}, w:${port.width ?? '?'}`;
+      };
+
+      const currentRotation = selectedNode?.data?.rotation ?? 0;
+      const currentComponentDisplayName = selectedNode?.data?.componentDisplayName || '';
+
+      const handleStartEditName = () => {
+        setTempComponentName(currentComponentDisplayName);
+        setEditingComponentName(true);
+      };
+
+      const handleSaveName = () => {
+        const newName = tempComponentName.trim();
+        if (newName && selectedNode) {
+          onRenameComponent(selectedNode.id, newName);
+        }
+        setEditingComponentName(false);
+      };
+
+      const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+          handleSaveName();
+        } else if (e.key === 'Escape') {
+          setEditingComponentName(false);
+        }
+      };
+
+      return (
+        <aside style={{
+          width: width, background: '#fafafa', borderLeft: '1px solid #ccc',
+          padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
+          boxSizing: 'border-box', overflowY: 'auto'
+        }}>
+          <div className="right-block">
+            <div className="right-block-header">Properties</div>
+            <div className="right-block-body">
+              {selectedNode ? (
+                <div>
+                  <label>X:</label>
+                  <input
+                    type="number"
+                    step="1"
+                    value={localX}
+                    onChange={(e) => setLocalX(e.target.value)}
+                    onBlur={() => {
+                      const val = parseFloat(localX);
+                      if (!isNaN(val) && selectedNode) {
+                        updatePosition(selectedNode.id, 'x', val);
+                        setLocalX(val.toFixed(3));
+                      } else if (selectedNode) {
+                        setLocalX(selectedNode.position.x.toFixed(3));
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.currentTarget.blur();
+                      }
+                    }}
+                    style={{ width: '100%' }}
+                  />
+                  <br /><br />
+                  <label>Y:</label>
+                  <input
+                    type="number"
+                    step="1"
+                    value={localY}
+                    onChange={(e) => setLocalY(e.target.value)}
+                    onBlur={() => {
+                      const val = parseFloat(localY);
+                      if (!isNaN(val) && selectedNode) {
+                        updatePosition(selectedNode.id, 'y', val);
+                        setLocalY(val.toFixed(3));
+                      } else if (selectedNode) {
+                        setLocalY(selectedNode.position.y.toFixed(3));
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.currentTarget.blur();
+                      }
+                    }}
+                    style={{ width: '100%' }}
+                  />
+                  <br /><br />
+                  <label>A (deg):</label>
+                  <div style={{ marginTop: 4 }}>
+                  
+                    <input
+                      type="number"
+                      step="1"
+                      value={localRotation}
+                      onChange={(e) => setLocalRotation(e.target.value)}
+                      onBlur={() => {
+                        const val = parseFloat(localRotation);
+                        if (!isNaN(val) && selectedNode) {
+                          updateRotation(selectedNode.id, val);
+                          setLocalRotation(val.toFixed(3));
+                        } else if (selectedNode) {
+                          setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
+                        }
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.currentTarget.blur();
+                        }
+                      }}
+                      style={{ width: '100%', marginTop: 4 }}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <p style={{ color: '#999' }}>Click a node to edit</p>
+              )}
+            </div>
+          </div>
+
+          {selectedNode?.data?.componentName && (
+            <div className="right-block">
+              <div className="right-block-header">Item details</div>
+              <div className="right-block-body">
+                {loading ? (
+                  <p>Loading...</p>
+                ) : componentData ? (
+                  <>
+                    <div style={{ marginBottom: '10px' }}>
+                      <strong style={{ display: 'block', marginBottom: '4px' }}>Component name:</strong>
+                      {editingComponentName ? (
+                        <input
+                          type="text"
+                          value={tempComponentName} 
+                          onChange={(e) => setTempComponentName(e.target.value)}
+                          onBlur={handleSaveName}
+                          onKeyDown={handleKeyDown}
+                          autoFocus
+                          style={{ width: '100%', padding: '4px', fontSize: '0.85em', boxSizing: 'border-box' }}
+                        />
+                      ) : (
+                        <div
+                          style={{
+                            cursor: 'pointer',
+                            padding: '4px 6px',
+                            backgroundColor: '#f0f0f0',
+                            borderRadius: '3px',
+                            display: 'inline-block',
+                            wordBreak: 'break-all'
+                          }}
+                          onClick={handleStartEditName}
+                          title="Click to edit"
+                        >
+                          {currentComponentDisplayName || componentData.name} ✎
+                        </div>
+                      )}
+                    </div>
+
+                    <p style={{ wordBreak: 'break-all', whiteSpace: 'normal', overflowWrap: 'break-word', marginTop: '8px' }}>
+                      <strong>PDK name:</strong><br />{componentData.name}
+                    </p>
+                    <p><strong>Description:</strong><br />
+                      Foundry: {componentData.foundry}<br />
+                      Process: {componentData.process}<br />
+                      Year: {componentData.year}<br />
+                      Designer: {componentData.designer}
+                    </p>
+                    <p><strong>PDK:</strong> (string)</p>
+                    <p><strong>Ports:</strong></p>
+                    <ul style={{ paddingLeft: 20, margin: 0 }}>
+                      {componentData.ports && Object.entries(componentData.ports).map(([portName, portInfo]) => (
+                        <li key={portName} style={{ letterSpacing: '0.5px' }}>{portName}: {formatPort(portInfo)}</li>
+                      ))}
+                    </ul>
+                    <p><strong>Image:</strong></p>
+                    <div style={{
+                      border: '1px dashed #ccc', width: '100%', height: 80,
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      color: '#999', background: '#fcfcfc', marginTop: 4,
+                      overflow: 'hidden',
+                    }}>
+                      <img
+                        src={`/api/component/${encodeURIComponent(componentData.name)}/image`}
+                        alt="Component layout"
+                        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', cursor: 'pointer' }}
+                        onClick={() => setEnlarged(`/api/component/${encodeURIComponent(componentData.name)}/image`)}
+                        onError={(e) => {
+                          e.currentTarget.style.display = 'none';
+                          e.currentTarget.parentElement.innerHTML = 'No image available';
+                        }}
+                      />
+                    </div>
+                  </>
+                ) : (
+                  <p style={{ color: '#999' }}>No data</p>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="right-block" style={{ marginTop: 'auto' }}>
+            <div className="right-block-header">Function block to be explored</div>
+            <div className="right-block-body placeholder-block">Reserved for future functionality</div>
+          </div>
+
+          {enlarged && (
+            <div
+              style={{
+                position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+                backgroundColor: 'rgba(0,0,0,0.8)', zIndex: 1000,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                cursor: 'zoom-out',
+              }}
+              onClick={() => setEnlarged(null)}
+            >
+              <img
+                src={enlarged}
+                alt="Enlarged layout"
+                style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain' }}
+              />
+            </div>
+          )}
+        </aside>
+      );
+    }, (prevProps, nextProps) => {
+      const prev = prevProps.selectedNode;
+      const next = nextProps.selectedNode;
+      if (prev?.id !== next?.id) return false;
+      if (prev?.position?.x !== next?.position?.x) return false;
+      if (prev?.position?.y !== next?.position?.y) return false;
+      if (prev?.data?.rotation !== next?.data?.rotation) return false;
+      if (prev?.data?.componentName !== next?.data?.componentName) return false;
+      if (prev?.data?.componentDisplayName !== next?.data?.componentDisplayName) return false;
+      if (prevProps.width !== nextProps.width) return false;
+      return true;
+    });
+
+    const ResizeHandle = ({ onMouseDown }) => (
+      <div
+        onMouseDown={onMouseDown}
+        style={{
+          width: 6, cursor: 'col-resize', background: 'transparent',
+          transition: 'background 0.2s', zIndex: 5, flexShrink: 0,
+        }}
+        onMouseEnter={(e) => e.currentTarget.style.background = '#ccc'}
+        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+      />
+    );
+
+    function App() {
+      const [nodes, setNodes, onNodesChange] = useNodesState([]);
+      const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+      const reactFlowInstance = useReactFlow();
+
+      const [library, setLibrary] = useState(null);
+      const [treeKey, setTreeKey] = useState(0);
+      const [expanded, setExpanded] = useState(false);
+      const treeContainerRef = useRef(null);
+
+      const [leftWidth, setLeftWidth] = useState(240);
+      const [rightWidth, setRightWidth] = useState(220);
+      const [dragging, setDragging] = useState(null);
+
+      const [gridSnap, setGridSnap] = useState(false);
+
+      const componentCounterRef = useRef(1);
+
+      const generateComponentDisplayName = useCallback(() => {
+        const name = `component_${componentCounterRef.current}`;
+        componentCounterRef.current += 1;
+        return name;
+      }, []);
+
+      const renameComponent = useCallback((nodeId, newComponentDisplayName) => {
+        setNodes(nds => nds.map(n => {
+          if (n.id === nodeId) {
+            return {
+              ...n,
+              data: {
+                ...n.data,
+                componentDisplayName: newComponentDisplayName
+              }
+            };
+          }
+          return n;
+        }));
+      }, [setNodes]);
+
+      const fetchLibrary = useCallback(async () => {
+        try {
+          const res = await fetch('/api/library');
+          const data = await res.json();
+          setLibrary(data);
+        } catch (err) {
+          console.error('Failed to fetch library', err);
+        }
+      }, []);
+      useEffect(() => { fetchLibrary(); }, [fetchLibrary]);
+
+      const selectedNode = useMemo(() => nodes.find(n => n.selected), [nodes]);
+
+      const onDragOver = useCallback((event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+      }, []);
+
+      const onDrop = useCallback((event) => {
+        event.preventDefault();
+        const type = event.dataTransfer.getData('application/reactflow');
+        if (!type) return;
+        const position = reactFlowInstance.screenToFlowPosition({
+          x: event.clientX,
+          y: event.clientY,
+        });
+        const componentDisplayName = generateComponentDisplayName();
+        const newNode = {
+          id: Date.now().toString(),
+          type: 'rotatableNode',
+          position,
+          data: {
+            label: type,
+            componentName: type,
+            rotation: 0,
+            componentDisplayName: componentDisplayName
+          },
+        };
+        setNodes((nds) => nds.concat(newNode));
+      }, [setNodes, reactFlowInstance, generateComponentDisplayName]);
+
+      const onConnect = useCallback((connection) => {
+        setEdges((eds) => addEdge({ ...connection, type: 'straight' }, eds));
+      }, [setEdges]);
+
+      const expandAll = useCallback(() => {
+        if (treeContainerRef.current) {
+          treeContainerRef.current.querySelectorAll('details').forEach(d => d.open = true);
+        }
+      }, []);
+      const collapseAll = useCallback(() => setTreeKey(k => k + 1), []);
+      const handleToggle = useCallback(() => {
+        if (expanded) { collapseAll(); setExpanded(false); }
+        else { expandAll(); setExpanded(true); }
+      }, [expanded, expandAll, collapseAll]);
+
+      const handleResizeStart = useCallback((side) => (e) => {
+        e.preventDefault();
+        setDragging(side);
+      }, []);
+      useEffect(() => {
+        if (!dragging) return;
+        const onMouseMove = (e) => {
+          if (dragging === 'left') {
+            setLeftWidth(Math.min(500, Math.max(150, e.clientX)));
+          } else if (dragging === 'right') {
+            const newWidth = window.innerWidth - e.clientX;
+            setRightWidth(Math.min(500, Math.max(150, newWidth)));
+          }
+        };
+        const onMouseUp = () => setDragging(null);
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        return () => {
+          window.removeEventListener('mousemove', onMouseMove);
+          window.removeEventListener('mouseup', onMouseUp);
+        };
+      }, [dragging]);
+
+      const toggleGridSnap = useCallback(() => {
+        setGridSnap(prev => !prev);
+      }, []);
+
+      return (
+        <div style={{ display: 'flex', width: '100%', height: '100%', userSelect: dragging ? 'none' : 'auto' }}>
+          <LeftPanel
+            library={library} treeKey={treeKey} expanded={expanded}
+            onToggle={handleToggle} treeRef={treeContainerRef} width={leftWidth}
+          />
+          <ResizeHandle onMouseDown={handleResizeStart('left')} />
+
+          <div style={{ flex: 1, position: 'relative' }}>
+            <div style={{
+              position: 'absolute', top: 10, right: 10, zIndex: 10,
+              display: 'flex', alignItems: 'center', gap: 8,
+            }}>
+              <span style={{
+                fontSize: '0.85em', fontWeight: 'bold', fontFamily: "'Sofia Pro', sans-serif",
+                color: '#333', userSelect: 'none'
+              }}>Grid lock</span>
+              <div
+                onClick={toggleGridSnap}
+                style={{
+                  width: 48, height: 24, borderRadius: 12,
+                  background: gridSnap ? '#28a745' : '#ccc',
+                  cursor: 'pointer', display: 'flex', alignItems: 'center',
+                  padding: '0 2px', transition: 'background 0.3s',
+                  boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.2)',
+                }}
+              >
+                <div style={{
+                  width: 20, height: 20, borderRadius: '50%',
+                  background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+                  transform: gridSnap ? 'translateX(24px)' : 'translateX(0)',
+                  transition: 'transform 0.2s',
+                }} />
+              </div>
+            </div>
+
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onDragOver={onDragOver}
+              onDrop={onDrop}
+              onConnect={onConnect}
+              nodeTypes={{ rotatableNode: RotatableNode }}
+              fitView
+              snapToGrid={gridSnap}
+              snapGrid={[10, 10]}
+              nodesDraggable={true}
+              nodesConnectable={true}
+              elementsSelectable={true}
+              connectionRadius={50}
+            >
+              <Controls />
+              <Background />
+            </ReactFlow>
+          </div>
+
+          <ResizeHandle onMouseDown={handleResizeStart('right')} />
+          <RightPanel
+            selectedNode={selectedNode}
+            width={rightWidth}
+            onRenameComponent={renameComponent}
+          />
+        </div>
+      );
+    }
+
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(
+      <ReactFlowProvider>
+        <App />
+      </ReactFlowProvider>
+    );
+  </script>
+</body>
+
+</html>
+
+{% endraw %}
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Dashboard</title>
+</head>
+<body>
+    <h2>Welcome, {{ username }}!</h2>
+    <p>Your Recent Designs:</p>
+    <ul>
+        <li>400G_Transceiver_v1.gds</li>
+        <li>Ring_Modulator_Test.gds</li>
+    </ul>
+    
+    <!-- The "+" button that links to your GUI -->
+    <form action="/canvas" method="GET">
+        <button type="submit" style="font-size: 20px; padding: 10px;">+ New Project</button>
+    </form>
+    
+    <br>
+    <a href="/logout">Logout</a>
+</body>
+</html>
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>mxPIC EDA - Login</title>
+</head>
+<body>
+    <h2>Login to mxPIC System</h2>
+    <!-- The form sends data to the /login route in server.py -->
+    <form action="/login" method="POST">
+        <label>Username:</label><br>
+        <input type="text" name="username" required><br><br>
+        
+        <label>Password:</label><br>
+        <input type="password" name="password" required><br><br>
+        
+        <button type="submit">Login</button>
+    </form>
+    <!-- Display error messages if login fails -->
+    {% if error %}
+        <p style="color:red;">{{ error }}</p>
+    {% endif %}
+</body>
+</html>