components/local-model.js

// Local AI Image Model Simulation
// This component simulates having a local image generation model
class LocalModelStatus extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .model-status {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.25rem 0.75rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 500;
          background: rgba(59, 130, 246, 0.1);
          color: rgb(96, 165, 250);
          border: 1px solid rgba(59, 130, 246, 0.2);
        }
        .status-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: currentColor;
          animation: pulse 2s infinite;
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      </style>
      <div class="model-status">
        <div class="status-dot"></div>
        <span>Local Image Model Ready</span>
      </div>
    `;
  }
}

customElements.define('local-model-status', LocalModelStatus);