ai_screen_analyzer 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a6bf3e8162eb1f6bf74dbc3c95014e2dc85eac5b366ab8250c37565b3a2a3cd8
+  data.tar.gz: 6cc3545842cf2c2a3590c97a1303a4551e85c59f54ca5c4eb24547035608e6db
+SHA512:
+  metadata.gz: 18c631bb87ef6ec91e4b730202dd4ad330c8cb54c711e8a2332624417bac0d07df127da950244c016651a8496608825e19303abe4ccc352036bd3a23ff0705da
+  data.tar.gz: b776e0d6e50be723bce6632a709715a63a448cdee294273d878237fa1ae7e865197eb21c592f9e8e44c8f1d75c45bdf53b1f3cd544f28a43761bea65d153f927

data/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2024-12-10
+
+### Added
+- Initial release of AI Screen Analyzer gem
+- `ai_screen_analyzer` helper to add AI screen analysis to any page
+- Customizable floating button
+- Elegant sidebar to display results
+- Support for customizable prompts
+- Controller to process analysis requests
+- Integration with OpenAI GPT-4V API
+- Installation generator
+- Complete documentation
+
+### Features
+- Screenshot capture using html2canvas
+- Image upload for AI analysis
+- Real-time results display
+- Support for customizing colors and texts
+- Responsive for mobile devices

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 AI Screen Analyzer Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,242 @@
+# AI Screen Analyzer
+
+A Rails gem that adds AI-powered screen analysis to any application. With a simple helper, you can capture the visual content of any page, send it for analysis with GPT-4V, and display the result in an interactive sidebar.
+
+![usage_sample.gif](sample.gif)
+
+## Features
+
+- **Customizable Floating Button:** A sleek button that appears on any page.
+- **Automatic Screenshot Capture:** Uses `html2canvas` to capture the visual content of the page.
+- **AI Analysis:** Integration with OpenAI's GPT-4V for intelligent analysis.
+- **Responsive Sidebar:** Displays results in an elegant, non-intrusive sidebar.
+- **Customizable Prompts:** Configure different prompts for different use cases.
+- **Easy Integration:** Just add one line of code to your layout.
+- **No External Dependencies:** Uses only standard Rails libraries.
+
+## Installation
+
+Add the gem to your `Gemfile`:
+
+```ruby
+gem 'ai_screen_analyzer'
+```
+
+Run bundler:
+
+```bash
+bundle install
+```
+
+Run the installation generator:
+
+```bash
+rails generate ai_screen_analyzer:install
+```
+
+## Routes
+
+The generator automatically mounts the engine in your host application. After installation, these routes are available by default:
+
+- Engine mounted at: `/ai_screen_analyzer`
+- Analysis endpoint: `POST /ai_screen_analyzer/analyze-screen`
+
+If you need to mount manually (or customize the path), add this to your app's `config/routes.rb`:
+
+```ruby
+# Mount the AiScreenAnalyzer engine, exposing its routes under /ai_screen_analyzer
+mount AiScreenAnalyzer::Engine => '/ai_screen_analyzer', as: 'ai_screen_analyzer_engine'
+
+# (Optional) Direct alias for compatibility with existing calls
+post '/ai_screen_analyzer/analyze-screen', to: 'ai_screen_analyzer/ai_analyzer#analyze_screen'
+```
+
+Notes:
+- The gem's view uses route helpers to resolve the endpoint dynamically according to the mounted path, avoiding 404s when you customize the path.
+- If you change the mount path, you don't need to change anything in the view; the helper will point to the new path.
+
+## Configuration
+
+### 1. OpenAI API Key
+
+Set your OpenAI API key as an environment variable:
+
+```bash
+export OPENAI_API_KEY='your_secret_key_here'
+```
+
+Or configure it in `config/initializers/ai_screen_analyzer.rb`:
+
+```ruby
+AiScreenAnalyzer.configure do |config|
+  config.api_key = ENV['OPENAI_API_KEY']
+  config.model = 'gpt-4-turbo'
+end
+```
+
+### 2. Add the Helper to the Layout
+
+Open your main layout (`app/views/layouts/application.html.erb`) and add:
+
+```erb
+<body>
+  <%= yield %>
+  
+  <%= ai_screen_analyzer %>
+</body>
+```
+
+## Usage
+
+### Basic Usage
+
+```erb
+<%= ai_screen_analyzer %>
+```
+
+### With Customizations
+
+```erb
+<%= ai_screen_analyzer(
+  prompt: "You are a UX expert. Analyze this interface and provide feedback.",
+  button_text: "Review Design",
+  sidebar_title: "UX Feedback"
+) %>
+```
+
+## Options
+
+| Option | Description | Default |
+|-------|-----------|--------|
+| `prompt` | The prompt text sent to the AI along with the image | "Analyze the visible content on this screen..." |
+| `button_text` | Text displayed on the floating button | "Analyze with AI" |
+| `sidebar_title` | Title of the results sidebar | "AI Analysis" |
+
+## Usage Examples
+
+### UX/UI Analysis
+
+```erb
+<%= ai_screen_analyzer(
+  prompt: "You are a UX/UI expert. Analyze this interface and provide feedback on: 1) Visual hierarchy, 2) Accessibility, 3) Design consistency, 4) Improvement suggestions.",
+  button_text: "Review Design",
+  sidebar_title: "UX/UI Feedback"
+) %>
+```
+
+### Accessibility Analysis
+
+```erb
+<%= ai_screen_analyzer(
+  prompt: "You are a web accessibility (WCAG) specialist. Analyze this page and identify potential accessibility issues.",
+  button_text: "Check Accessibility",
+  sidebar_title: "Accessibility Analysis"
+) %>
+```
+
+### Content Analysis
+
+```erb
+<%= ai_screen_analyzer(
+  prompt: "Analyze the textual content of this page. Evaluate: 1) Clarity of message, 2) Writing quality, 3) Tone appropriateness.",
+  button_text: "Analyze Content",
+  sidebar_title: "Content Analysis"
+) %>
+```
+
+## How It Works
+
+1. The user clicks the "Analyze with AI" button.
+2. The `html2canvas` JavaScript library captures an image of the page body.
+3. The image is converted to base64 and sent to the Rails backend.
+4. The controller processes the image and sends it to the GPT-4V API.
+5. The AI analyzes the image according to the provided prompt.
+6. The result is returned and displayed in the sidebar.
+
+## Gem Structure
+
+```
+ai_screen_analyzer/
+├── app/
+│   ├── controllers/
+│   │   └── ai_screen_analyzer/
+│   │       └── ai_analyzer_controller.rb
+│   ├── helpers/
+│   │   └── ai_screen_analyzer/
+│   │       └── ai_screen_analyzer_helper.rb
+│   └── views/
+│       └── ai_screen_analyzer/
+│           └── shared/
+│               └── _ai_screen_analyzer.html.erb
+├── config/
+│   └── routes.rb
+├── lib/
+│   ├── ai_screen_analyzer.rb
+│   ├── ai_screen_analyzer/
+│   │   ├── engine.rb
+│   │   └── version.rb
+│   └── generators/
+│       └── ai_screen_analyzer/
+│           └── install_generator.rb
+├── ai_screen_analyzer.gemspec
+├── Rakefile
+├── README.md
+├── LICENSE.txt
+└── CHANGELOG.md
+```
+
+## Requirements
+
+- Rails 6.0 or higher
+- Ruby 2.7.0 or higher
+- Valid OpenAI API key (with access to the gpt-4-turbo model)
+
+## Troubleshooting
+
+### The button does not appear
+
+Make sure the helper is being called correctly in your layout and there are no errors in the browser console.
+
+### Analysis is not working
+
+Ensure that:
+- The OpenAI API key is configured correctly
+- You have sufficient credits in your OpenAI account
+- The route is registered correctly
+
+### 404 error when calling analyze-screen
+
+- Ensure the engine is mounted in the host app. By default, the generator already adds this line to your `config/routes.rb`:
+
+  ```ruby
+  mount AiScreenAnalyzer::Engine => '/ai_screen_analyzer', as: 'ai_screen_analyzer_engine'
+  ```
+
+- If you removed the automatic mount, add it manually as above.
+- Restart the server after changing routes.
+- Run `bin/rails routes | grep ai_screen_analyzer` to confirm the presence of the `analyze-screen` endpoint.
+
+### CORS error
+
+If you receive CORS errors when capturing the screen, ensure that all external resources are using HTTPS.
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
+
+## License
+
+This gem is licensed under the MIT License. See LICENSE.txt for details.
+
+## Support
+
+For support, open an issue in the GitHub repository or contact the maintainers.
+
+## Changelog
+
+See the CHANGELOG.md file for a list of all changes.
+
+## Roadmap
+
+- Support for other AI models (Claude, Gemini, etc.)
+- Cache of recent analyses

data/app/controllers/ai_screen_analyzer/ai_analyzer_controller.rb

@@ -0,0 +1,91 @@
+require 'base64'
+require 'net/http'
+require 'json'
+
+module AiScreenAnalyzer
+  class AiAnalyzerController < ActionController::Base
+    skip_before_action :verify_authenticity_token, only: [:analyze_screen]
+
+    def analyze_screen
+      begin
+        image_data = params[:image]
+        prompt = params[:prompt]
+
+        # Validar parâmetros
+        return render_error('Imagem não fornecida') if image_data.blank?
+        return render_error('Prompt não fornecido') if prompt.blank?
+
+        # Remover data URI prefix se presente
+        image_data = image_data.sub(/^data:image\/\w+;base64,/, '')
+
+        # Chamar API do GPT-4V
+        analysis = analyze_with_gpt4v(image_data, prompt)
+
+        render json: {
+          success: true,
+          analysis: analysis
+        }
+      rescue StandardError => e
+        render_error(e.message)
+      end
+    end
+
+    private
+
+    def analyze_with_gpt4v(image_data, prompt)
+      api_key = ENV['OPENAI_API_KEY'] || AiScreenAnalyzer.api_key
+      return 'Chave de API não configurada' if api_key.blank?
+
+      uri = URI('https://api.openai.com/v1/chat/completions')
+      http = Net::HTTP.new(uri.host, uri.port)
+      http.use_ssl = true
+      http.verify_mode = OpenSSL::SSL::VERIFY_NONE
+
+      request = Net::HTTP::Post.new(uri.path)
+      request['Content-Type'] = 'application/json'
+      request['Authorization'] = "Bearer #{api_key}"
+
+      model = AiScreenAnalyzer.model || 'gpt-4-turbo'
+
+      body = {
+        model: model,
+        messages: [
+          {
+            role: 'user',
+            content: [
+              {
+                type: 'text',
+                text: prompt
+              },
+              {
+                type: 'image_url',
+                image_url: {
+                  url: "data:image/jpeg;base64,#{image_data}"
+                }
+              }
+            ]
+          }
+        ],
+        max_tokens: 1024
+      }
+
+      request.body = body.to_json
+
+      response = http.request(request)
+      result = JSON.parse(response.body)
+
+      if response.code.to_i == 200
+        result['choices'][0]['message']['content']
+      else
+        raise "Erro da API: #{result['error']['message']}"
+      end
+    end
+
+    def render_error(message)
+      render json: {
+        success: false,
+        error: message
+      }, status: :unprocessable_entity
+    end
+  end
+end

data/app/helpers/ai_screen_analyzer/ai_screen_analyzer_helper.rb

@@ -0,0 +1,15 @@
+module AiScreenAnalyzer
+  module AiScreenAnalyzerHelper
+    def ai_screen_analyzer(options = {})
+      prompt = options[:prompt] || AiScreenAnalyzer.default_prompt
+      button_text = options[:button_text] || AiScreenAnalyzer.default_button_text
+      sidebar_title = options[:sidebar_title] || AiScreenAnalyzer.default_sidebar_title
+      
+      render 'ai_screen_analyzer/shared/ai_screen_analyzer', {
+        prompt: prompt,
+        button_text: button_text,
+        sidebar_title: sidebar_title
+      }
+    end
+  end
+end

data/app/views/ai_screen_analyzer/shared/_ai_screen_analyzer.html.erb

@@ -0,0 +1,374 @@
+<% # AI Screen Analyzer Component %>
+
+<div>
+  <%# Resolve dinamicamente o endpoint respeitando o path de montagem definido no app host %>
+  <% endpoint_path = (analyze_screen_path rescue '/ai_screen_analyzer/analyze-screen') %>
+  <!-- Botão flutuante para ativar análise -->
+  <button 
+    class="button"
+    id="ai-analyzer-trigger"
+    title="Clique para analisar a tela com IA"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="1"></circle>
+      <path d="M12 1v6m0 6v6"></path>
+      <path d="M4.22 4.22l4.24 4.24m5.08 5.08l4.24 4.24"></path>
+      <path d="M1 12h6m6 0h6"></path>
+      <path d="M4.22 19.78l4.24-4.24m5.08-5.08l4.24-4.24"></path>
+    </svg>
+    <%= button_text %>
+  </button>
+
+  <!-- Barra lateral com resultado da análise -->
+  <div class="ai-analyzer-sidebar" id="ai-analyzer-sidebar">
+    <div class="ai-analyzer-header">
+      <h3><%= sidebar_title %></h3>
+      <button class="ai-analyzer-close" id="ai-analyzer-close">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+
+    <div class="ai-analyzer-content" id="ai-analyzer-content">
+      <div class="ai-analyzer-loading" id="ai-analyzer-loading" style="display: none;">
+        <div class="spinner"></div>
+        <p>Analisando tela com IA...</p>
+      </div>
+      <div class="ai-analyzer-result" id="ai-analyzer-result" style="display: none;"></div>
+      <div class="ai-analyzer-error" id="ai-analyzer-error" style="display: none;"></div>
+    </div>
+  </div>
+
+  <!-- Overlay para fechar sidebar -->
+  <div class="ai-analyzer-overlay" id="ai-analyzer-overlay"></div>
+</div>
+
+<style>
+  .ai-screen-analyzer-container {
+    position: fixed;
+    z-index: 9998;
+  }
+
+  /* Botão flutuante */
+  .ai-analyzer-button {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    transition: all 0.3s ease;
+    font-size: 0;
+    padding: 0;
+  }
+
+  .ai-analyzer-button:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
+  }
+
+  .ai-analyzer-button:active {
+    transform: scale(0.95);
+  }
+
+  .ai-analyzer-button svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  /* Overlay */
+  .ai-analyzer-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9997;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+
+  .ai-analyzer-overlay.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* Barra lateral */
+  .ai-analyzer-sidebar {
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 400px;
+    height: 100vh;
+    background: white;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    overflow: hidden;
+  }
+
+  .ai-analyzer-sidebar.active {
+    transform: translateX(0);
+  }
+
+  @media (max-width: 768px) {
+    .ai-analyzer-sidebar {
+      width: 100%;
+    }
+  }
+
+  /* Header da sidebar */
+  .ai-analyzer-header {
+    padding: 20px;
+    border-bottom: 1px solid #e5e7eb;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+  }
+
+  .ai-analyzer-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .ai-analyzer-close {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease;
+  }
+
+  .ai-analyzer-close:hover {
+    opacity: 0.8;
+  }
+
+  /* Conteúdo da sidebar */
+  .ai-analyzer-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+  }
+
+  /* Loading spinner */
+  .ai-analyzer-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #e5e7eb;
+    border-top-color: #667eea;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .ai-analyzer-loading p {
+    margin-top: 16px;
+    color: #6b7280;
+    font-size: 14px;
+  }
+
+  /* Resultado */
+  .ai-analyzer-result {
+    color: #374151;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  .ai-analyzer-result h4 {
+    color: #667eea;
+    margin-top: 16px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .ai-analyzer-result p {
+    margin: 0 0 12px 0;
+  }
+
+  .ai-analyzer-result ul,
+  .ai-analyzer-result ol {
+    margin: 8px 0 12px 20px;
+    padding: 0;
+  }
+
+  .ai-analyzer-result li {
+    margin-bottom: 6px;
+  }
+
+  /* Erro */
+  .ai-analyzer-error {
+    background: #fee2e2;
+    border: 1px solid #fecaca;
+    border-radius: 6px;
+    padding: 12px;
+    color: #991b1b;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  /* Scrollbar customizado */
+  .ai-analyzer-content::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .ai-analyzer-content::-webkit-scrollbar-track {
+    background: #f3f4f6;
+  }
+
+  .ai-analyzer-content::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 3px;
+  }
+
+  .ai-analyzer-content::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const triggerButton = document.getElementById('ai-analyzer-trigger');
+    const sidebar = document.getElementById('ai-analyzer-sidebar');
+    const closeButton = document.getElementById('ai-analyzer-close');
+    const overlay = document.getElementById('ai-analyzer-overlay');
+    const loadingEl = document.getElementById('ai-analyzer-loading');
+    const resultEl = document.getElementById('ai-analyzer-result');
+    const errorEl = document.getElementById('ai-analyzer-error');
+
+    const prompt = '<%= prompt %>';
+    const endpoint = '<%= endpoint_path %>';
+
+    function openSidebar() {
+      sidebar.classList.add('active');
+      overlay.classList.add('active');
+    }
+
+    function closeSidebar() {
+      sidebar.classList.remove('active');
+      overlay.classList.remove('active');
+    }
+
+    function showLoading() {
+      loadingEl.style.display = 'flex';
+      resultEl.style.display = 'none';
+      errorEl.style.display = 'none';
+    }
+
+    function showResult(html) {
+      loadingEl.style.display = 'none';
+      resultEl.style.display = 'block';
+      errorEl.style.display = 'none';
+      resultEl.innerHTML = html;
+    }
+
+    function showError(message) {
+      loadingEl.style.display = 'none';
+      resultEl.style.display = 'none';
+      errorEl.style.display = 'block';
+      errorEl.innerHTML = `<strong>Erro:</strong> ${message}`;
+    }
+
+    async function captureAndAnalyzeScreen() {
+      openSidebar();
+      showLoading();
+
+      try {
+        // Carregar html2canvas dinamicamente
+        const script = document.createElement('script');
+        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
+        
+        script.onload = async function() {
+          try {
+            const canvas = await html2canvas(document.body, {
+              allowTaint: true,
+              useCORS: true,
+              scale: 1,
+              backgroundColor: '#ffffff'
+            });
+
+            const imageData = canvas.toDataURL('image/jpeg', 0.8);
+
+            // Enviar para backend
+            const response = await fetch(endpoint, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+              },
+              body: JSON.stringify({
+                image: imageData,
+                prompt: prompt
+              })
+            });
+
+            if (!response.ok) {
+              throw new Error(`Erro ${response.status}: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+
+            if (data.success) {
+              // Converter markdown para HTML simples
+              const html = data.analysis
+                .replace(/\n\n/g, '</p><p>')
+                .replace(/\n/g, '<br>')
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                .replace(/^- (.*?)$/gm, '<li>$1</li>')
+                .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
+
+              showResult(`<p>${html}</p>`);
+            } else {
+              showError(data.error || 'Erro ao analisar a tela');
+            }
+          } catch (error) {
+            showError(error.message || 'Erro ao capturar a tela');
+          }
+        };
+
+        document.head.appendChild(script);
+      } catch (error) {
+        showError(error.message || 'Erro desconhecido');
+      }
+    }
+
+    triggerButton.addEventListener('click', captureAndAnalyzeScreen);
+    closeButton.addEventListener('click', closeSidebar);
+    overlay.addEventListener('click', closeSidebar);
+  });
+</script>

data/config/routes.rb

@@ -0,0 +1,3 @@
+AiScreenAnalyzer::Engine.routes.draw do
+  post 'analyze-screen', to: 'ai_analyzer#analyze_screen', as: :analyze_screen
+end

data/lib/ai_screen_analyzer/engine.rb

@@ -0,0 +1,38 @@
+module AiScreenAnalyzer
+  class Engine < ::Rails::Engine
+    isolate_namespace AiScreenAnalyzer
+
+    # Garantir que helpers do engine sejam autocarregados/eager carregados
+    config.autoload_paths << config.root.join('app/helpers')
+    config.eager_load_paths << config.root.join('app/helpers')
+    config.eager_load_namespaces << AiScreenAnalyzer
+
+    initializer "ai_screen_analyzer.helpers" do
+      # Certifica-se de que a constante do helper exista antes de qualquer constantize do Rails
+      helper_path = AiScreenAnalyzer::Engine.root.join('app/helpers/ai_screen_analyzer/ai_screen_analyzer_helper.rb').to_s
+      ActiveSupport::Dependencies.autoload_paths << File.dirname(helper_path) unless ActiveSupport::Dependencies.autoload_paths.include?(File.dirname(helper_path))
+
+      ActiveSupport.on_load(:action_view) do
+        require_dependency helper_path
+        include AiScreenAnalyzer::AiScreenAnalyzerHelper
+      end
+
+      ActiveSupport.on_load(:action_controller) do
+        require_dependency helper_path
+        helper AiScreenAnalyzer::AiScreenAnalyzerHelper
+      end
+    end
+
+    config.to_prepare do
+      # Recarrega o helper em modo desenvolvimento para refletir mudanças
+      helper_path = AiScreenAnalyzer::Engine.root.join('app/helpers/ai_screen_analyzer/ai_screen_analyzer_helper.rb').to_s
+      begin
+        require_dependency helper_path
+        ActionView::Base.include AiScreenAnalyzer::AiScreenAnalyzerHelper
+      rescue LoadError, NameError
+        # Em ambientes onde o helper não é necessário, apenas ignore
+      end
+    end
+
+  end
+end

data/lib/ai_screen_analyzer/version.rb

@@ -0,0 +1,3 @@
+module AiScreenAnalyzer
+  VERSION = "0.1.0"
+end

data/lib/ai_screen_analyzer.rb

@@ -0,0 +1,24 @@
+require 'active_support'
+require 'active_support/core_ext/module/attribute_accessors'
+require "ai_screen_analyzer/version"
+require "ai_screen_analyzer/engine" if defined?(Rails)
+
+module AiScreenAnalyzer
+  class Error < StandardError; end
+
+  # Configuração padrão
+  mattr_accessor :api_key
+  mattr_accessor :model
+  mattr_accessor :default_prompt
+  mattr_accessor :default_button_text
+  mattr_accessor :default_sidebar_title
+
+  self.model = "gpt-4-turbo"
+  self.default_prompt = "Analise o conteúdo visível nesta tela e descreva: 1) O que você vê, 2) Elementos principais, 3) Possíveis melhorias de UX/UI"
+  self.default_button_text = "Analisar com IA"
+  self.default_sidebar_title = "Análise da IA"
+
+  def self.configure
+    yield self if block_given?
+  end
+end

data/lib/generators/ai_screen_analyzer/install_generator.rb

@@ -0,0 +1,81 @@
+module AiScreenAnalyzer
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path('templates', __dir__)
+
+      desc "Instala o AI Screen Analyzer e cria um arquivo de configuração"
+
+      def create_initializer
+        create_file "config/initializers/ai_screen_analyzer.rb", <<~RUBY
+          # AI Screen Analyzer Configuration
+          # Configure a gem AI Screen Analyzer aqui
+
+          AiScreenAnalyzer.configure do |config|
+            # Defina sua chave de API da OpenAI
+            # config.api_key = ENV['OPENAI_API_KEY']
+
+            # Modelo de IA a ser usado (padrão: gpt-4-turbo)
+            # config.model = 'gpt-4-turbo'
+
+            # Prompt padrão para análise
+            # config.default_prompt = "Analise o conteúdo visível nesta tela..."
+
+            # Texto do botão
+            # config.default_button_text = "Analisar com IA"
+
+            # Título da sidebar
+            # config.default_sidebar_title = "Análise da IA"
+          end
+        RUBY
+      end
+
+      def mount_engine_routes
+        routes_path = "config/routes.rb"
+
+        if File.exist?(routes_path)
+          content = File.read(routes_path)
+          already_mounted = content.include?("AiScreenAnalyzer::Engine")
+
+          unless already_mounted
+            say_status :route, "Montando AiScreenAnalyzer::Engine em /ai_screen_analyzer", :green
+            route "mount AiScreenAnalyzer::Engine => '/ai_screen_analyzer', as: 'ai_screen_analyzer_engine'"
+          else
+            say_status :route, "AiScreenAnalyzer::Engine já está montado (nenhuma alteração)", :blue
+          end
+        else
+          say_status :warning, "Arquivo config/routes.rb não encontrado. Adicione manualmente: mount AiScreenAnalyzer::Engine => '/ai_screen_analyzer', as: 'ai_screen_analyzer_engine'", :yellow
+        end
+      end
+
+      def display_readme
+        puts <<~TEXT
+
+          ╔════════════════════════════════════════════════════════════════╗
+          ║         AI Screen Analyzer instalado com sucesso!             ║
+          ╚════════════════════════════════════════════════════════════════╝
+
+          Próximos passos:
+
+          1. Rotas montadas automaticamente:
+             - O engine foi montado em /ai_screen_analyzer
+             - Endpoint de análise: POST /ai_screen_analyzer/analyze-screen
+             - Se desejar mudar o path de montagem, ajuste em config/routes.rb e veja a seção "Rotas" do README.
+
+          2. Configure sua chave de API da OpenAI:
+             - Abra config/initializers/ai_screen_analyzer.rb
+             - Descomente e configure as opções desejadas
+
+          3. Adicione o helper em seu layout principal:
+             <%= ai_screen_analyzer %>
+
+          4. Certifique-se de que a variável de ambiente está definida:
+             export OPENAI_API_KEY='sua_chave_aqui'
+
+          Para mais informações, visite:
+          https://github.com/seu-usuario/ai_screen_analyzer
+
+        TEXT
+      end
+    end
+  end
+end

metadata

@@ -0,0 +1,131 @@
+--- !ruby/object:Gem::Specification
+name: ai_screen_analyzer
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- José Lopes Neto
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2025-12-12 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+description: AI Screen Analyzer é uma gem Rails que adiciona um botão flutuante em
+  qualquer página para capturar a tela, enviar para análise com GPT-4V e exibir o
+  resultado em uma barra lateral elegante.
+email:
+- jlneto@mcfox.com.br
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- app/controllers/ai_screen_analyzer/ai_analyzer_controller.rb
+- app/helpers/ai_screen_analyzer/ai_screen_analyzer_helper.rb
+- app/views/ai_screen_analyzer/shared/_ai_screen_analyzer.html.erb
+- config/routes.rb
+- lib/ai_screen_analyzer.rb
+- lib/ai_screen_analyzer/engine.rb
+- lib/ai_screen_analyzer/version.rb
+- lib/generators/ai_screen_analyzer/install_generator.rb
+homepage: https://github.com/mcfox/ai_screen_analyzer
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/mcfox/ai_screen_analyzer
+  source_code_uri: https://github.com/mcfox/ai_screen_analyzer
+  bug_tracker_uri: https://github.com/mcfox/ai_screen_analyzer/issues
+  changelog_uri: https://github.com/mcfox/ai_screen_analyzer/releases
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.7.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.9
+signing_key:
+specification_version: 4
+summary: Rails helper gem para analisar telas com IA usando GPT-4V
+test_files: []