easy_ml 0.2.0.pre.rc72 → 0.2.0.pre.rc75

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed02cf75773a42dbff72981b550b5b2622a059ab2d0b89584113bd526811dcc9
-  data.tar.gz: '095c4973dd471f64f0175e11788fafd1618c3ef4e23d8354b5a64d9fecd0a470'
+  metadata.gz: 9c924f9d9ccee9dcad409f1dd077b55f29214aea419c4edbf3f7f7d16b8d71e6
+  data.tar.gz: c82401ebf3763354d77ff536d12d81bc9642ce9145bce961f9c274b535b16eea
 SHA512:
-  metadata.gz: 03dde99dc4afb11da099b0b7ae11aaebc2150b76c7248ed779f02d4ca0adcefb04397de8d0bb61041ea5b1bbc2d1f17c74d0e2d257f5d8f96ac8b52397ab4461
-  data.tar.gz: 364f932614a638d372abbeb73501dc2940c03ea81ece27bd0c97c4412f1587af0e5c9e36a769ecbc5f7f55c768265c8410f67e31b98a16f1f8afa17fa5b7952a
+  metadata.gz: 2df9bbd0fd82067fa4ec5976ba5f5292e2c052ff1eeaad0286b44cbfe4797cf02102fba788a01963b413a33a51297c5501f623310461fda18c2f541a61c2172c
+  data.tar.gz: 0f131bc4143b76d1b13641716854d1bf7ed0c06751cf31b69ebd2a8f1ec96abb1417d38d72039fd8266619c3183250ef1d0b39dc4b9381fa15843a910271387e

data/app/controllers/easy_ml/datasets_controller.rb

@@ -129,6 +129,39 @@ module EasyML
       redirect_to easy_ml_datasets_path, notice: "Dataset refresh has been initiated."
     end
 
+    def abort
+      dataset = Dataset.find(params[:id])
+      dataset.abort!
+
+      redirect_to easy_ml_datasets_path, notice: "Dataset processing has been aborted."
+    end
+
+    def download
+      dataset = Dataset.find(params[:id])
+      config = dataset.to_config
+
+      send_data JSON.pretty_generate(config),
+                filename: "#{dataset.name.parameterize}-config.json",
+                type: "application/json",
+                disposition: "attachment"
+    end
+
+    def upload
+      dataset = Dataset.find(params[:id]) if params[:id].present?
+
+      begin
+        config = JSON.parse(params[:config].read)
+        action = dataset.present? ? :update : :create
+        EasyML::Dataset.from_config(config, action: action, dataset: dataset)
+
+        flash[:notice] = "Dataset configuration was successfully uploaded."
+        redirect_to easy_ml_datasets_path
+      rescue JSON::ParserError, StandardError => e
+        flash[:error] = "Failed to upload configuration: #{e.message}"
+        redirect_to easy_ml_datasets_path
+      end
+    end
+
     private
 
     def preprocessing_params

data/app/controllers/easy_ml/datasources_controller.rb

@@ -80,6 +80,13 @@ module EasyML
       redirect_to easy_ml_datasources_path, error: "Datasource not found..."
     end
 
+    def abort
+      datasource = Datasource.find(params[:id])
+      datasource.abort!
+
+      redirect_to easy_ml_datasources_path, notice: "Datasource sync has been aborted."
+    end
+
     private
 
     def datasource_params

data/app/controllers/easy_ml/models_controller.rb

@@ -23,6 +23,7 @@ module EasyML
 
       render inertia: "pages/ModelsPage", props: {
         models: models.map { |model| model_to_json(model) },
+        datasets: EasyML::Dataset.all.map { |dataset| dataset.slice(:id, :name, :num_rows) },
       }
     end
 
@@ -126,6 +127,43 @@ module EasyML
       redirect_to easy_ml_models_path
     end
 
+    def download
+      model = Model.find(params[:id])
+      config = model.to_config(include_dataset: params[:include_dataset] == "true")
+
+      send_data JSON.pretty_generate(config),
+                filename: "#{model.name.parameterize}-config.json",
+                type: "application/json",
+                disposition: "attachment"
+    end
+
+    def upload
+      model = Model.find(params[:id]) if params[:id].present?
+
+      begin
+        config = JSON.parse(params[:config].read)
+        dataset = if params[:dataset_id].present?
+            EasyML::Dataset.find(params[:dataset_id])
+          else
+            model.dataset
+          end
+
+        action = model.present? ? :update : :create
+
+        EasyML::Model.from_config(config,
+                                  action: action,
+                                  model: model,
+                                  include_dataset: params[:include_dataset] == "true",
+                                  dataset: dataset)
+
+        flash[:notice] = "Model configuration was successfully uploaded."
+        redirect_to easy_ml_models_path
+      rescue JSON::ParserError, StandardError => e
+        flash[:error] = "Failed to upload configuration: #{e.message}"
+        redirect_to easy_ml_models_path
+      end
+    end
+
     private
 
     def includes_list

data/app/frontend/components/DatasetCard.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import { Link } from '@inertiajs/react';
+import { Database, Trash2, ExternalLink, Loader2, AlertCircle, ChevronDown, ChevronUp, RefreshCw, XCircle, Download, Upload } from 'lucide-react';
+import { Dataset, DatasetWorkflowStatus, Column } from "@types/dataset";
+import { StackTrace } from './StackTrace';
+
+interface Props {
+  dataset: Dataset;
+  rootPath: string;
+  onDelete: (id: number) => void;
+  onRefresh: (id: number) => void;
+  onAbort: (id: number) => void;
+  isErrorExpanded: boolean;
+  onToggleError: (id: number) => void;
+}
+
+const STATUS_STYLES: Record<DatasetWorkflowStatus, { bg: string; text: string; icon: React.ReactNode }> = {
+  analyzing: {
+    bg: 'bg-blue-100',
+    text: 'text-blue-800',
+    icon: <Loader2 className="w-4 h-4 animate-spin" />
+  },
+  ready: {
+    bg: 'bg-green-100',
+    text: 'text-green-800',
+    icon: null
+  },
+  failed: {
+    bg: 'bg-red-100',
+    text: 'text-red-800',
+    icon: <AlertCircle className="w-4 h-4" />
+  },
+};
+
+export function DatasetCard({
+  dataset,
+  rootPath,
+  onDelete,
+  onRefresh,
+  onAbort,
+  isErrorExpanded,
+  onToggleError
+}: Props) {
+  // Create a hidden file input for handling uploads
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleDownload = () => {
+    window.location.href = `${rootPath}/datasets/${dataset.id}/download`;
+  };
+
+  const handleUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append('config', file);
+
+    fetch(`${rootPath}/datasets/${dataset.id}/upload`, {
+      method: 'POST',
+      body: formData,
+      credentials: 'same-origin',
+      headers: {
+        'X-CSRF-Token': document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content || '',
+      },
+    }).then(response => {
+      if (response.ok) {
+        window.location.reload();
+      } else {
+        console.error('Upload failed');
+      }
+    });
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
+      <div className="flex justify-between items-start mb-4">
+        <div className="flex items-start gap-3">
+          <Database className="w-5 h-5 text-blue-600 mt-1" />
+          <div>
+            <div className="flex items-center gap-2">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {dataset.name}
+              </h3>
+              <div className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_STYLES[dataset.workflow_status].bg} ${STATUS_STYLES[dataset.workflow_status].text}`}>
+                {STATUS_STYLES[dataset.workflow_status].icon}
+                <span>{dataset.workflow_status.charAt(0).toUpperCase() + dataset.workflow_status.slice(1)}</span>
+              </div>
+            </div>
+            <p className="text-sm text-gray-500 mt-1">
+              {dataset.description}
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Link
+            href={`${rootPath}/datasets/${dataset.id}`}
+            className={`transition-colors ${
+              dataset.workflow_status === 'analyzing'
+                ? 'text-gray-300 cursor-not-allowed pointer-events-none'
+                : 'text-gray-400 hover:text-blue-600'
+            }`}
+            title={dataset.workflow_status === 'analyzing' ? 'Dataset is being analyzed' : 'View details'}
+          >
+            <ExternalLink className="w-5 h-5" />
+          </Link>
+          <button
+            onClick={() => onRefresh(dataset.id)}
+            disabled={dataset.workflow_status === 'analyzing'}
+            className={`transition-colors ${
+              dataset.workflow_status === 'analyzing'
+                ? 'text-gray-300 cursor-not-allowed'
+                : 'text-gray-400 hover:text-blue-600'
+            }`}
+            title={dataset.workflow_status === 'analyzing' ? 'Dataset is being analyzed' : 'Refresh dataset'}
+          >
+            <RefreshCw className="w-5 h-5" />
+          </button>
+          {dataset.workflow_status === 'analyzing' && (
+            <button
+              onClick={() => onAbort(dataset.id)}
+              className="text-gray-400 hover:text-red-600 transition-colors"
+              title="Abort analysis"
+            >
+              <XCircle className="w-5 h-5" />
+            </button>
+          )}
+          <button
+            onClick={handleDownload}
+            className="text-gray-400 hover:text-blue-600 transition-colors"
+            title="Download dataset configuration"
+          >
+            <Download className="w-5 h-5" />
+          </button>
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            className="text-gray-400 hover:text-green-600 transition-colors"
+            title="Upload dataset configuration"
+          >
+            <Upload className="w-5 h-5" />
+          </button>
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleUpload}
+            accept=".json"
+            className="hidden"
+          />
+          <button
+            className="text-gray-400 hover:text-red-600 transition-colors"
+            title="Delete dataset"
+            onClick={() => onDelete(dataset.id)}
+          >
+            <Trash2 className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 mt-4">
+        <div>
+          <span className="text-sm text-gray-500">Columns</span>
+          <p className="text-sm font-medium text-gray-900">
+            {dataset.columns.length} columns
+          </p>
+        </div>
+        <div>
+          <span className="text-sm text-gray-500">Rows</span>
+          <p className="text-sm font-medium text-gray-900">
+            {dataset.num_rows.toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-gray-100">
+        <div className="flex flex-wrap gap-2">
+          {dataset.columns.slice(0, 3).map((column: Column) => (
+            <span
+              key={column.name}
+              className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+            >
+              {column.name}
+            </span>
+          ))}
+          {dataset.columns.length > 3 && (
+            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+              +{dataset.columns.length - 3} more
+            </span>
+          )}
+        </div>
+      </div>
+
+      {dataset.workflow_status === 'failed' && dataset.stacktrace && (
+        <div className="mt-4 pt-4 border-t border-gray-100">
+          <button
+            onClick={() => onToggleError(dataset.id)}
+            className="flex items-center gap-2 text-sm text-red-600 hover:text-red-700"
+          >
+            <AlertCircle className="w-4 h-4" />
+            <span>View Error Details</span>
+            {isErrorExpanded ? (
+              <ChevronUp className="w-4 h-4" />
+            ) : (
+              <ChevronDown className="w-4 h-4" />
+            )}
+          </button>
+          {isErrorExpanded && (
+            <StackTrace stacktrace={dataset.stacktrace} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

data/app/frontend/components/ModelCard.tsx

@@ -1,20 +1,33 @@
 import React, { useState, useEffect } from 'react';
-import { Activity, Calendar, Database, Settings, ExternalLink, Play, LineChart,
-        Trash2, Loader2, XCircle, CheckCircle2, AlertCircle, ChevronDown, ChevronUp } from 'lucide-react';
+import {
+  Activity, Calendar, Database, Settings, ExternalLink, Play, LineChart,
+  Trash2, Loader2, XCircle, CheckCircle2, AlertCircle, ChevronDown, ChevronUp,
+  Download, Upload
+} from 'lucide-react';
 import { Link, router } from "@inertiajs/react";
 import { cn } from '@/lib/utils';
 import type { Model, RetrainingJob, RetrainingRun } from '../types';
-
+import { StackTrace } from './StackTrace';
+import { DownloadModelModal, UploadModelModal } from './models';
+import { Dataset } from '../types';
 interface ModelCardProps {
   initialModel: Model;
   onViewDetails: (modelId: number) => void;
   handleDelete: (modelId: number) => void;
   rootPath: string;
+  datasets: Array<Dataset>;
 }
 
-export function ModelCard({ initialModel, onViewDetails, handleDelete, rootPath }: ModelCardProps) {
+export function ModelCard({ initialModel, onViewDetails, handleDelete, rootPath, datasets }: ModelCardProps) {
   const [model, setModel] = useState(initialModel);
   const [showError, setShowError] = useState(false);
+  const [showDownloadModal, setShowDownloadModal] = useState(false);
+  const [showUploadModal, setShowUploadModal] = useState(false);
+
+  // Update local state when initialModel changes
+  useEffect(() => {
+    setModel(initialModel);
+  }, [initialModel]);
 
   useEffect(() => {
     let pollInterval: number | undefined;
@@ -135,7 +148,7 @@ export function ModelCard({ initialModel, onViewDetails, handleDelete, rootPath
       <div className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
           <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
-            ${model.deployment_status === 'inference' 
+            ${model.deployment_status === 'inference'
               ? 'bg-blue-100 text-blue-800'
               : 'bg-gray-100 text-gray-800'}`}
           >
@@ -155,14 +168,41 @@ export function ModelCard({ initialModel, onViewDetails, handleDelete, rootPath
             <button
               onClick={handleTrain}
               disabled={model.is_training}
-              className={`text-gray-400 hover:text-green-600 transition-colors ${
-                model.is_training ? 'opacity-50 cursor-not-allowed' : ''
-              }`}
+              className={`text-gray-400 hover:text-green-600 transition-colors ${model.is_training ? 'opacity-50 cursor-not-allowed' : ''
+                }`}
               title="Train model"
             >
               <Play className="w-5 h-5" />
             </button>
             {renderTrainingStatus()}
+            <button
+              onClick={() => setShowDownloadModal(true)}
+              className="text-gray-400 hover:text-blue-600"
+              title="Download configuration"
+            >
+              <Download className="w-5 h-5" />
+            </button>
+            <button
+              onClick={() => setShowUploadModal(true)}
+              className="text-gray-400 hover:text-green-600"
+              title="Upload configuration"
+            >
+              <Upload className="w-5 h-5" />
+            </button>
+            <Link
+              href={`${rootPath}/models/${model.id}/edit`}
+              className="text-gray-400 hover:text-gray-600"
+              title="Edit model"
+            >
+              <Settings className="w-5 h-5" />
+            </Link>
+            <button
+              onClick={() => handleDelete(model.id)}
+              className="text-gray-400 hover:text-gray-600"
+              title="Delete model"
+            >
+              <Trash2 className="w-5 h-5" />
+            </button>
             {
               model.metrics_url && (
                 <a
@@ -183,20 +223,6 @@ export function ModelCard({ initialModel, onViewDetails, handleDelete, rootPath
             >
               <ExternalLink className="w-5 h-5" />
             </Link>
-            <Link
-              href={`${rootPath}/models/${model.id}/edit`}
-              className="text-gray-400 hover:text-gray-600"
-              title="Edit model"
-            >
-              <Settings className="w-5 h-5" />
-            </Link>
-            <button
-              onClick={() => handleDelete(model.id)}
-              className="text-gray-400 hover:text-gray-600"
-              title="Delete model"
-            >
-              <Trash2 className="w-5 h-5" />
-            </button>
           </div>
         </div>
 
@@ -214,7 +240,7 @@ export function ModelCard({ initialModel, onViewDetails, handleDelete, rootPath
         <div className="flex items-center gap-2">
           <Database className="w-4 h-4 text-gray-400" />
           {dataset ? (
-            <Link 
+            <Link
               href={`${rootPath}/datasets/${dataset.id}`}
               className="text-sm text-blue-600 hover:text-blue-800"
             >
@@ -252,11 +278,10 @@ export function ModelCard({ initialModel, onViewDetails, handleDelete, rootPath
             {Object.entries(lastRun.metrics as Record<string, number>).map(([key, value]) => (
               <div
                 key={key}
-                className={`px-2 py-1 rounded-md text-xs font-medium ${
-                  lastRun.deployable
+                className={`px-2 py-1 rounded-md text-xs font-medium ${lastRun.deployable
                     ? 'bg-green-100 text-green-800'
                     : 'bg-red-100 text-red-800'
-                }`}
+                  }`}
               >
                 {key}: {value.toFixed(4)}
               </div>
@@ -281,13 +306,28 @@ export function ModelCard({ initialModel, onViewDetails, handleDelete, rootPath
           </button>
           {showError && (
             <div className="mt-2 p-3 bg-red-50 rounded-md">
-              <pre className="text-xs text-red-700 whitespace-pre-wrap break-words [word-break:break-word] font-mono">
-                {lastRun.stacktrace}
-              </pre>
+              <StackTrace stacktrace={lastRun.stacktrace} />
             </div>
           )}
         </div>
       )}
+      {showDownloadModal && (
+        <DownloadModelModal
+          isOpen={showDownloadModal}
+          onClose={() => setShowDownloadModal(false)}
+          modelId={model.id}
+        />
+      )}
+
+      {showUploadModal && (
+        <UploadModelModal
+          isOpen={showUploadModal}
+          onClose={() => setShowUploadModal(false)}
+          modelId={model.id}
+          dataset_id={model.dataset_id}
+          datasets={datasets}
+        />
+      )}
       <div className="flex items-center space-x-4">
         <button
           onClick={() => onViewDetails(model.id)}

data/app/frontend/components/StackTrace.tsx

@@ -0,0 +1,13 @@
+interface StackTraceProps {
+  stacktrace: string;
+}
+
+export function StackTrace({ stacktrace }: StackTraceProps) {
+  return (
+    <div className="mt-2 p-3 bg-red-50 rounded-md">
+      <pre className="text-xs text-red-700 whitespace-pre-wrap break-words [word-break:break-word] font-mono">
+        {stacktrace}
+      </pre>
+    </div>
+  );
+}

data/app/frontend/components/dataset/FeatureConfigPopover.tsx

@@ -37,16 +37,19 @@ module Features
   class DidConvert
     include EasyML::Features
 
-    def did_convert(df)
+    def computes_columns
+      ["did_convert"]
+    end
+
+    def transform(df, feature)
       df.with_column(
-        (Polars.col("rev") > 0)
-          .alias("did_convert")
+        (Polars.col("rev") > 0).alias("did_convert")
       )
     end
-    
-    feature :did_convert,
-      name: "Did Convert",
-      description: "Boolean true/false..."
+
+    feature name: "did_convert",
+            description: "Boolean true/false, did the loan application fund?"
+
   end
 end`}
           </code>

data/app/frontend/components/datasets/UploadDatasetButton.tsx

@@ -0,0 +1,51 @@
+import React, { useRef } from 'react';
+import { Upload } from 'lucide-react';
+import { router, usePage } from '@inertiajs/react';
+
+export function UploadDatasetButton() {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { rootPath } = usePage().props;
+
+  const handleUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append('config', file);
+
+    fetch(`${rootPath}/datasets/upload`, {
+      method: 'POST',
+      body: formData,
+      credentials: 'same-origin',
+      headers: {
+        'X-CSRF-Token': document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content || '',
+      },
+    }).then(response => {
+      if (response.ok) {
+        window.location.reload();
+      } else {
+        console.error('Upload failed');
+      }
+    });
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => fileInputRef.current?.click()}
+        className="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50"
+        title="Import dataset"
+      >
+        <Upload className="w-4 h-4" />
+        Import
+      </button>
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleUpload}
+        accept=".json"
+        className="hidden"
+      />
+    </>
+  );
+}

data/app/frontend/components/models/DownloadModelModal.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { FileDown, FileJson, Database, ArrowRight } from 'lucide-react';
+import { router, usePage } from '@inertiajs/react';
+
+interface DownloadModelModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  modelId: number;
+}
+
+export function DownloadModelModal({ isOpen, onClose, modelId }: DownloadModelModalProps) {
+  const { rootPath } = usePage().props;
+  const [selectedOption, setSelectedOption] = useState<'model' | 'both' | null>(null);
+
+  if (!isOpen) return null;
+
+  const handleDownload = async () => {
+    if (!selectedOption) return;
+    
+    const includeDataset = selectedOption === 'both';
+    window.location.href = `${rootPath}/models/${modelId}/download?include_dataset=${includeDataset}`;
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold text-gray-900">Download Configuration</h3>
+          <div className="p-2 bg-blue-50 rounded-lg">
+            <FileDown className="w-5 h-5 text-blue-600" />
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <button
+            onClick={() => setSelectedOption('model')}
+            className={`w-full px-4 py-3 rounded-lg text-left transition-all duration-200 ${
+              selectedOption === 'model'
+                ? 'bg-blue-50 border-2 border-blue-500 ring-2 ring-blue-200'
+                : 'bg-white border-2 border-gray-200 hover:border-blue-200'
+            }`}
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium text-gray-900">Model Only</div>
+                <div className="text-sm text-gray-500">Download model configuration without dataset details</div>
+              </div>
+              <FileJson className={`w-5 h-5 ${selectedOption === 'model' ? 'text-blue-600' : 'text-gray-400'}`} />
+            </div>
+          </button>
+
+          <button
+            onClick={() => setSelectedOption('both')}
+            className={`w-full px-4 py-3 rounded-lg text-left transition-all duration-200 ${
+              selectedOption === 'both'
+                ? 'bg-blue-50 border-2 border-blue-500 ring-2 ring-blue-200'
+                : 'bg-white border-2 border-gray-200 hover:border-blue-200'
+            }`}
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium text-gray-900">Model + Dataset</div>
+                <div className="text-sm text-gray-500">Download complete configuration including dataset details</div>
+              </div>
+              <Database className={`w-5 h-5 ${selectedOption === 'both' ? 'text-blue-600' : 'text-gray-400'}`} />
+            </div>
+          </button>
+        </div>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleDownload}
+            disabled={!selectedOption}
+            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed inline-flex items-center gap-2"
+          >
+            Download
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}