Skip to content

Add Unsloth AI provider support with integrated UI flow via pluggable fine-tuning abstraction #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 7 commits into from
Closed

Add Unsloth AI provider support with integrated UI flow via pluggable fine-tuning abstraction #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2a1a3e7
Initial plan
Copilot Nov 4, 2025
f462950
Add provider abstraction layer with HuggingFace and Unsloth support
Copilot Nov 4, 2025
ebeec06
Fix Unsloth export method and address code review feedback
Copilot Nov 4, 2025
807be48
Add provider selection dropdown to UI with installation tooltips
Copilot Nov 4, 2025
45157be
Integrate provider selection into UI flow: Get Started → Pick Provide…
Copilot Nov 4, 2025
7374b0a
Fix provider selection page: add logos, remove comparison table, impr…
Copilot Nov 4, 2025
a170337
Fix provider persistence: preserve provider selection throughout flow
Copilot Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
355 changes: 8 additions & 347 deletions Frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 14 additions & 5 deletions Frontend/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
import Navbar from './components/Navbar';
import LandingPage from './pages/AppLanding';
import ProviderSelectionPage from './pages/ProviderSelectionPage';
import DetectHardwarePage from './pages/DetectHardwarePage';
import FinetuneSettings from './pages/FinetuningSettingsPage';
import Loading from './pages/Loading';
import TechnicalDetailsPage from './pages/TechnicalDetailsPage';
import ListModels from './pages/ListModels';
import './index.css';
import ListAllModels from "./pages/ListAllModels";

const RedirectToFastAPI = () => {
Expand All @@ -21,6 +20,7 @@ const RedirectToFastAPI = () => {

function App() {
const [finetuneSettings, setFinetuneSettings] = useState({
provider: 'huggingface', // Default provider
task: 'text-generation',
model_name: 'llama2-7b',
compute_specs: 'Standard GPU',
Expand Down Expand Up @@ -88,10 +88,10 @@ function App() {
<Routes>
<Route path="/" element={<LandingPage />} />
<Route
path="/finetune/load_settings"
path="/finetune/provider"
element={
<FinetuneSettings
defaultValues={finetuneSettings}
<ProviderSelectionPage
currentSettings={finetuneSettings}
updateSettings={updateSettings}
/>
}
Expand All @@ -105,6 +105,15 @@ function App() {
/>
}
/>
<Route
path="/finetune/load_settings"
element={
<FinetuneSettings
defaultValues={finetuneSettings}
updateSettings={updateSettings}
/>
}
/>
{/* <Route
path="/app"
element={<DetectHardwarePage />}
Expand Down
6 changes: 3 additions & 3 deletions Frontend/src/pages/AppLanding.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const LandingPage = ({ appName = "ModelForge" }) => {
</p>

<div className="flex flex-wrap justify-center gap-4">
<Link to="/finetune/detect" className="group bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 px-8 py-4 rounded-lg text-lg font-medium transition shadow-lg hover:shadow-orange-500/30 transform hover:-translate-y-1">
<Link to="/finetune/provider" className="group bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 px-8 py-4 rounded-lg text-lg font-medium transition shadow-lg hover:shadow-orange-500/30 transform hover:-translate-y-1">
Start Building Your AI
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 inline-block ml-2 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
Expand Down Expand Up @@ -224,7 +224,7 @@ const LandingPage = ({ appName = "ModelForge" }) => {
</ul>

<div className="mt-8">
<Link to="/finetune/detect" className="group bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 px-8 py-4 rounded-lg text-lg font-medium transition shadow-lg hover:shadow-orange-500/30">
<Link to="/finetune/provider" className="group bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 px-8 py-4 rounded-lg text-lg font-medium transition shadow-lg hover:shadow-orange-500/30">
Start Your Business AI
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 inline-block ml-2 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
Expand Down Expand Up @@ -270,7 +270,7 @@ const LandingPage = ({ appName = "ModelForge" }) => {
No coding. No technical skills. Just pure AI power at your fingertips.
</p>

<Link to="/finetune/detect" className="group bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 px-10 py-5 rounded-lg text-xl font-bold transition shadow-xl hover:shadow-orange-500/30 transform hover:-translate-y-1">
<Link to="/finetune/provider" className="group bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 px-10 py-5 rounded-lg text-xl font-bold transition shadow-xl hover:shadow-orange-500/30 transform hover:-translate-y-1">
Start Building Now
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline-block ml-2 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
Expand Down
38 changes: 25 additions & 13 deletions Frontend/src/pages/FinetuningSettingsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const FinetuneSettings = ({ defaultValues, updateSettings }) => {
const [showAdvanced, setShowAdvanced] = useState(false);
const [selectedFile, setSelectedFile] = useState(null);
const [formState, setFormState] = useState({});
const [settingsUpdated, setSettingsUpdated] = useState(false);
const [activeTooltip, setActiveTooltip] = useState(null);

useEffect(() => {
Expand All @@ -18,9 +17,16 @@ const FinetuneSettings = ({ defaultValues, updateSettings }) => {

const data = await response.json();
console.log("Fetched default values:", data.default_values);
defaultValues = data.default_values;
// Update form state with fetched values
setFormState(data.default_values);

// Preserve the provider from defaultValues if it exists
const preservedProvider = defaultValues?.provider || 'huggingface';
console.log("Preserving provider:", preservedProvider);

// Update form state with fetched values but preserve provider
setFormState({
...data.default_values,
provider: preservedProvider
});
} catch (err) {
console.error("Error fetching settings:", err);
}
Expand Down Expand Up @@ -88,10 +94,17 @@ const FinetuneSettings = ({ defaultValues, updateSettings }) => {
formData.append("json_file", selectedFile, selectedFile.name);
}

// Ensure provider is included in formState
const settingsToSend = {
...formState,
provider: formState.provider || defaultValues.provider || 'huggingface'
};

// Append settings as a JSON string
formData.append("settings", JSON.stringify(formState));
formData.append("settings", JSON.stringify(settingsToSend));

console.log("Sending data to server:",JSON.stringify(formState));
console.log("Sending data to server:", JSON.stringify(settingsToSend));
console.log("Provider being sent:", settingsToSend.provider);

try {
const response = await fetch(`${config.baseURL}/finetune/load_settings`, {
Expand Down Expand Up @@ -164,13 +177,6 @@ const FinetuneSettings = ({ defaultValues, updateSettings }) => {
<p className="text-gray-400 mt-2">Configure your model training parameters</p>
</div>

{settingsUpdated && (
<div className="bg-green-700 text-white p-4 rounded-lg mb-6 flex items-center justify-between">
<div>Settings updated successfully! Redirecting...</div>
<div className="animate-spin h-5 w-5 border-2 border-white rounded-full border-t-transparent"></div>
</div>
)}

<form onSubmit={handleSubmit} className="space-y-8">
{/* Configuration Summary */}
<div className="bg-gray-800 rounded-lg p-6">
Expand All @@ -192,6 +198,12 @@ const FinetuneSettings = ({ defaultValues, updateSettings }) => {
{formState.model_name || defaultValues.model_name || 'Not set'}
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-400 mb-1">Fine-tuning Provider</label>
<div className="bg-gray-900 border border-gray-700 rounded-lg p-3 text-white capitalize">
{formState.provider || defaultValues.provider || 'huggingface'}
</div>
</div>
<div>
<Tooltip id="gpu">
<label className="block text-sm font-medium text-gray-400 mb-1">GPU</label>
Expand Down
Loading