mirror of
https://github.com/mudler/LocalAI.git
synced 2026-10-20 05:22:47 -04:00
feat(ui): add video gen UI (#8020)
Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto authored and GitHub committed
1 parent
b19afc9e64
commit
64d0a96ba3
8 files changed
+678
-13
No files matched your search
+1
-1
@@ -56,7 +56,7 @@ type RunCMD struct {
|
||||
UseSubtleKeyComparison bool `env:"LOCALAI_SUBTLE_KEY_COMPARISON" default:"false" help:"If true, API Key validation comparisons will be performed using constant-time comparisons rather than simple equality. This trades off performance on each request for resiliancy against timing attacks." group:"hardening"`
|
||||
DisableApiKeyRequirementForHttpGet bool `env:"LOCALAI_DISABLE_API_KEY_REQUIREMENT_FOR_HTTP_GET" default:"false" help:"If true, a valid API key is not required to issue GET requests to portions of the web ui. This should only be enabled in secure testing environments" group:"hardening"`
|
||||
DisableMetricsEndpoint bool `env:"LOCALAI_DISABLE_METRICS_ENDPOINT,DISABLE_METRICS_ENDPOINT" default:"false" help:"Disable the /metrics endpoint" group:"api"`
|
||||
HttpGetExemptedEndpoints []string `env:"LOCALAI_HTTP_GET_EXEMPTED_ENDPOINTS" default:"^/$,^/browse/?$,^/talk/?$,^/p2p/?$,^/chat/?$,^/text2image/?$,^/tts/?$,^/static/.*$,^/swagger.*$" help:"If LOCALAI_DISABLE_API_KEY_REQUIREMENT_FOR_HTTP_GET is overriden to true, this is the list of endpoints to exempt. Only adjust this in case of a security incident or as a result of a personal security posture review" group:"hardening"`
|
||||
HttpGetExemptedEndpoints []string `env:"LOCALAI_HTTP_GET_EXEMPTED_ENDPOINTS" default:"^/$,^/browse/?$,^/talk/?$,^/p2p/?$,^/chat/?$,^/image/?$,^/text2image/?$,^/tts/?$,^/static/.*$,^/swagger.*$" help:"If LOCALAI_DISABLE_API_KEY_REQUIREMENT_FOR_HTTP_GET is overriden to true, this is the list of endpoints to exempt. Only adjust this in case of a security incident or as a result of a personal security posture review" group:"hardening"`
|
||||
Peer2Peer bool `env:"LOCALAI_P2P,P2P" name:"p2p" default:"false" help:"Enable P2P mode" group:"p2p"`
|
||||
Peer2PeerDHTInterval int `env:"LOCALAI_P2P_DHT_INTERVAL,P2P_DHT_INTERVAL" default:"360" name:"p2p-dht-interval" help:"Interval for DHT refresh (used during token generation)" group:"p2p"`
|
||||
Peer2PeerOTPInterval int `env:"LOCALAI_P2P_OTP_INTERVAL,P2P_OTP_INTERVAL" default:"9000" name:"p2p-otp-interval" help:"Interval for OTP refresh (used during token generation)" group:"p2p"`
|
||||
|
||||
+54
-4
@@ -219,7 +219,7 @@ func RegisterUIRoutes(app *echo.Echo,
|
||||
return c.Render(200, "views/chat", summary)
|
||||
})
|
||||
|
||||
app.GET("/text2image/:model", func(c echo.Context) error {
|
||||
app.GET("/image/:model", func(c echo.Context) error {
|
||||
modelConfigs := cl.GetAllModelsConfigs()
|
||||
modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
|
||||
|
||||
@@ -233,10 +233,10 @@ func RegisterUIRoutes(app *echo.Echo,
|
||||
}
|
||||
|
||||
// Render index
|
||||
return c.Render(200, "views/text2image", summary)
|
||||
return c.Render(200, "views/image", summary)
|
||||
})
|
||||
|
||||
app.GET("/text2image", func(c echo.Context) error {
|
||||
app.GET("/image", func(c echo.Context) error {
|
||||
modelConfigs := cl.GetAllModelsConfigs()
|
||||
modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
|
||||
|
||||
@@ -266,7 +266,7 @@ func RegisterUIRoutes(app *echo.Echo,
|
||||
}
|
||||
|
||||
// Render index
|
||||
return c.Render(200, "views/text2image", summary)
|
||||
return c.Render(200, "views/image", summary)
|
||||
})
|
||||
|
||||
app.GET("/tts/:model", func(c echo.Context) error {
|
||||
@@ -318,6 +318,56 @@ func RegisterUIRoutes(app *echo.Echo,
|
||||
return c.Render(200, "views/tts", summary)
|
||||
})
|
||||
|
||||
app.GET("/video/:model", func(c echo.Context) error {
|
||||
modelConfigs := cl.GetAllModelsConfigs()
|
||||
modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
|
||||
|
||||
summary := map[string]interface{}{
|
||||
"Title": "LocalAI - Generate videos with " + c.Param("model"),
|
||||
"BaseURL": middleware.BaseURL(c),
|
||||
"ModelsConfig": modelConfigs,
|
||||
"ModelsWithoutConfig": modelsWithoutConfig,
|
||||
"Model": c.Param("model"),
|
||||
"Version": internal.PrintableVersion(),
|
||||
}
|
||||
|
||||
// Render index
|
||||
return c.Render(200, "views/video", summary)
|
||||
})
|
||||
|
||||
app.GET("/video", func(c echo.Context) error {
|
||||
modelConfigs := cl.GetAllModelsConfigs()
|
||||
modelsWithoutConfig, _ := services.ListModels(cl, ml, config.NoFilterFn, services.LOOSE_ONLY)
|
||||
|
||||
if len(modelConfigs)+len(modelsWithoutConfig) == 0 {
|
||||
// If no model is available redirect to the index which suggests how to install models
|
||||
return c.Redirect(302, middleware.BaseURL(c))
|
||||
}
|
||||
|
||||
modelThatCanBeUsed := ""
|
||||
title := "LocalAI - Generate videos"
|
||||
|
||||
for _, b := range modelConfigs {
|
||||
if b.HasUsecases(config.FLAG_VIDEO) {
|
||||
modelThatCanBeUsed = b.Name
|
||||
title = "LocalAI - Generate videos with " + modelThatCanBeUsed
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
summary := map[string]interface{}{
|
||||
"Title": title,
|
||||
"BaseURL": middleware.BaseURL(c),
|
||||
"ModelsConfig": modelConfigs,
|
||||
"ModelsWithoutConfig": modelsWithoutConfig,
|
||||
"Model": modelThatCanBeUsed,
|
||||
"Version": internal.PrintableVersion(),
|
||||
}
|
||||
|
||||
// Render index
|
||||
return c.Render(200, "views/video", summary)
|
||||
})
|
||||
|
||||
// Traces UI
|
||||
app.GET("/traces", func(c echo.Context) error {
|
||||
summary := map[string]interface{}{
|
||||
|
||||
@@ -0,0 +1,300 @@
|
||||
// Helper function to convert file to base64
|
||||
function fileToBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
// Remove data:image/...;base64, prefix if present
|
||||
const base64 = reader.result.split(',')[1] || reader.result;
|
||||
resolve(base64);
|
||||
};
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
function genVideo(event) {
|
||||
event.preventDefault();
|
||||
promptVideo();
|
||||
}
|
||||
|
||||
async function promptVideo() {
|
||||
const loader = document.getElementById("loader");
|
||||
const input = document.getElementById("input");
|
||||
const generateBtn = document.getElementById("generate-btn");
|
||||
const resultDiv = document.getElementById("result");
|
||||
const resultPlaceholder = document.getElementById("result-placeholder");
|
||||
|
||||
// Show loader and disable form
|
||||
loader.classList.remove("hidden");
|
||||
if (resultPlaceholder) {
|
||||
resultPlaceholder.style.display = "none";
|
||||
}
|
||||
input.disabled = true;
|
||||
generateBtn.disabled = true;
|
||||
|
||||
// Store the prompt for later restoration
|
||||
const prompt = input.value.trim();
|
||||
if (!prompt) {
|
||||
alert("Please enter a prompt");
|
||||
loader.classList.add("hidden");
|
||||
if (resultPlaceholder) {
|
||||
resultPlaceholder.style.display = "flex";
|
||||
}
|
||||
input.disabled = false;
|
||||
generateBtn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Collect all form values
|
||||
const model = document.getElementById("video-model").value;
|
||||
const size = document.getElementById("video-size").value;
|
||||
const negativePrompt = document.getElementById("negative-prompt").value.trim();
|
||||
|
||||
// Parse size into width and height
|
||||
const sizeParts = size.split("x");
|
||||
let width = 512;
|
||||
let height = 512;
|
||||
if (sizeParts.length === 2) {
|
||||
width = parseInt(sizeParts[0]) || 512;
|
||||
height = parseInt(sizeParts[1]) || 512;
|
||||
}
|
||||
|
||||
// Video-specific parameters
|
||||
const secondsInput = document.getElementById("video-seconds").value.trim();
|
||||
const seconds = secondsInput ? secondsInput : undefined;
|
||||
const fpsInput = document.getElementById("video-fps").value.trim();
|
||||
const fps = fpsInput ? parseInt(fpsInput) : 16;
|
||||
const framesInput = document.getElementById("video-frames").value.trim();
|
||||
const numFrames = framesInput ? parseInt(framesInput) : undefined;
|
||||
|
||||
// Advanced parameters
|
||||
const stepInput = document.getElementById("video-steps").value.trim();
|
||||
const step = stepInput ? parseInt(stepInput) : undefined;
|
||||
const seedInput = document.getElementById("video-seed").value.trim();
|
||||
const seed = seedInput ? parseInt(seedInput) : undefined;
|
||||
const cfgScaleInput = document.getElementById("video-cfg-scale").value.trim();
|
||||
const cfgScale = cfgScaleInput ? parseFloat(cfgScaleInput) : undefined;
|
||||
|
||||
// Prepare request body
|
||||
const requestBody = {
|
||||
model: model,
|
||||
prompt: prompt,
|
||||
width: width,
|
||||
height: height,
|
||||
fps: fps,
|
||||
};
|
||||
|
||||
if (negativePrompt) {
|
||||
requestBody.negative_prompt = negativePrompt;
|
||||
}
|
||||
|
||||
if (seconds !== undefined) {
|
||||
requestBody.seconds = seconds;
|
||||
}
|
||||
|
||||
if (numFrames !== undefined) {
|
||||
requestBody.num_frames = numFrames;
|
||||
}
|
||||
|
||||
if (step !== undefined) {
|
||||
requestBody.step = step;
|
||||
}
|
||||
|
||||
if (seed !== undefined) {
|
||||
requestBody.seed = seed;
|
||||
}
|
||||
|
||||
if (cfgScale !== undefined) {
|
||||
requestBody.cfg_scale = cfgScale;
|
||||
}
|
||||
|
||||
// Handle file inputs
|
||||
try {
|
||||
// Start image (for img2video)
|
||||
const startImageInput = document.getElementById("start-image");
|
||||
if (startImageInput.files.length > 0) {
|
||||
const base64 = await fileToBase64(startImageInput.files[0]);
|
||||
requestBody.start_image = base64;
|
||||
}
|
||||
|
||||
// End image
|
||||
const endImageInput = document.getElementById("end-image");
|
||||
if (endImageInput.files.length > 0) {
|
||||
const base64 = await fileToBase64(endImageInput.files[0]);
|
||||
requestBody.end_image = base64;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error processing image files:", error);
|
||||
resultDiv.innerHTML = '<p class="text-xs text-red-500 p-2">Error processing image files: ' + error.message + '</p>';
|
||||
loader.classList.add("hidden");
|
||||
if (resultPlaceholder) {
|
||||
resultPlaceholder.style.display = "none";
|
||||
}
|
||||
input.disabled = false;
|
||||
generateBtn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Make API request
|
||||
try {
|
||||
const response = await fetch("v1/videos/generations", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
|
||||
const json = await response.json();
|
||||
|
||||
if (json.error) {
|
||||
// Display error
|
||||
resultDiv.innerHTML = '<p class="text-xs text-red-500 p-2">Error: ' + json.error.message + '</p>';
|
||||
loader.classList.add("hidden");
|
||||
if (resultPlaceholder) {
|
||||
resultPlaceholder.style.display = "none";
|
||||
}
|
||||
input.disabled = false;
|
||||
generateBtn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear result div and hide placeholder
|
||||
resultDiv.innerHTML = '';
|
||||
if (resultPlaceholder) {
|
||||
resultPlaceholder.style.display = "none";
|
||||
}
|
||||
|
||||
// Display generated video
|
||||
if (json.data && json.data.length > 0) {
|
||||
json.data.forEach((item, index) => {
|
||||
const videoContainer = document.createElement("div");
|
||||
videoContainer.className = "flex flex-col";
|
||||
|
||||
// Create video element
|
||||
const video = document.createElement("video");
|
||||
video.controls = true;
|
||||
video.className = "w-full h-auto rounded-lg";
|
||||
video.preload = "metadata";
|
||||
|
||||
if (item.url) {
|
||||
video.src = item.url;
|
||||
} else if (item.b64_json) {
|
||||
video.src = "data:video/mp4;base64," + item.b64_json;
|
||||
} else {
|
||||
return; // Skip invalid items
|
||||
}
|
||||
|
||||
videoContainer.appendChild(video);
|
||||
|
||||
// Create caption container
|
||||
const captionDiv = document.createElement("div");
|
||||
captionDiv.className = "mt-2 p-2 bg-[var(--color-bg-secondary)] rounded-lg text-xs";
|
||||
|
||||
// Prompt caption
|
||||
const promptCaption = document.createElement("p");
|
||||
promptCaption.className = "text-[var(--color-text-primary)] mb-1.5 break-words";
|
||||
promptCaption.innerHTML = '<strong>Prompt:</strong> ' + escapeHtml(prompt);
|
||||
captionDiv.appendChild(promptCaption);
|
||||
|
||||
// Negative prompt if provided
|
||||
if (negativePrompt) {
|
||||
const negativeCaption = document.createElement("p");
|
||||
negativeCaption.className = "text-[var(--color-text-secondary)] mb-1.5 break-words";
|
||||
negativeCaption.innerHTML = '<strong>Negative Prompt:</strong> ' + escapeHtml(negativePrompt);
|
||||
captionDiv.appendChild(negativeCaption);
|
||||
}
|
||||
|
||||
// Generation details
|
||||
const detailsDiv = document.createElement("div");
|
||||
detailsDiv.className = "flex flex-wrap gap-3 text-[10px] text-[var(--color-text-secondary)] mt-1.5";
|
||||
detailsDiv.innerHTML = `
|
||||
<span><strong>Size:</strong> ${width}x${height}</span>
|
||||
${fps ? `<span><strong>FPS:</strong> ${fps}</span>` : ''}
|
||||
${numFrames !== undefined ? `<span><strong>Frames:</strong> ${numFrames}</span>` : ''}
|
||||
${seconds !== undefined ? `<span><strong>Duration:</strong> ${seconds}s</span>` : ''}
|
||||
${step !== undefined ? `<span><strong>Steps:</strong> ${step}</span>` : ''}
|
||||
${seed !== undefined ? `<span><strong>Seed:</strong> ${seed}</span>` : ''}
|
||||
${cfgScale !== undefined ? `<span><strong>CFG Scale:</strong> ${cfgScale}</span>` : ''}
|
||||
`;
|
||||
captionDiv.appendChild(detailsDiv);
|
||||
|
||||
// Copy prompt button
|
||||
const copyBtn = document.createElement("button");
|
||||
copyBtn.className = "mt-1.5 px-2 py-0.5 text-[10px] bg-[var(--color-primary)] text-white rounded hover:opacity-80";
|
||||
copyBtn.innerHTML = '<i class="fas fa-copy mr-1"></i>Copy Prompt';
|
||||
copyBtn.onclick = () => {
|
||||
navigator.clipboard.writeText(prompt).then(() => {
|
||||
copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!';
|
||||
setTimeout(() => {
|
||||
copyBtn.innerHTML = '<i class="fas fa-copy mr-1"></i>Copy Prompt';
|
||||
}, 2000);
|
||||
});
|
||||
};
|
||||
captionDiv.appendChild(copyBtn);
|
||||
|
||||
videoContainer.appendChild(captionDiv);
|
||||
resultDiv.appendChild(videoContainer);
|
||||
});
|
||||
// Hide placeholder when videos are displayed
|
||||
if (resultPlaceholder) {
|
||||
resultPlaceholder.style.display = "none";
|
||||
}
|
||||
} else {
|
||||
resultDiv.innerHTML = '<p class="text-xs text-[var(--color-text-secondary)] p-2">No videos were generated.</p>';
|
||||
if (resultPlaceholder) {
|
||||
resultPlaceholder.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error generating video:", error);
|
||||
resultDiv.innerHTML = '<p class="text-xs text-red-500 p-2">Error: ' + error.message + '</p>';
|
||||
if (resultPlaceholder) {
|
||||
resultPlaceholder.style.display = "none";
|
||||
}
|
||||
} finally {
|
||||
// Hide loader and re-enable form
|
||||
loader.classList.add("hidden");
|
||||
input.disabled = false;
|
||||
generateBtn.disabled = false;
|
||||
input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to escape HTML
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const input = document.getElementById("input");
|
||||
const form = document.getElementById("genvideo");
|
||||
|
||||
if (input) {
|
||||
input.focus();
|
||||
}
|
||||
|
||||
if (form) {
|
||||
form.addEventListener("submit", genVideo);
|
||||
}
|
||||
|
||||
// Handle Enter key press in the prompt input (but allow Shift+Enter for new lines)
|
||||
if (input) {
|
||||
input.addEventListener("keydown", function(event) {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
genVideo(event);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hide loader initially
|
||||
const loader = document.getElementById("loader");
|
||||
if (loader) {
|
||||
loader.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
@@ -28,19 +28,19 @@
|
||||
{{ $cfg := . }}
|
||||
{{ range .KnownUsecaseStrings }}
|
||||
{{ if eq . "FLAG_IMAGE" }}
|
||||
<option value="text2image/{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{$cfg.Name}}</option>
|
||||
<option value="image/{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{$cfg.Name}}</option>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ range .ModelsWithoutConfig }}
|
||||
<option value="text2image/{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.}}</option>
|
||||
<option value="image/{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<input id="image-model" type="hidden" value="{{.Model}}">
|
||||
<form id="genimage" action="text2image/{{.Model}}" method="get">
|
||||
<form id="genimage" action="image/{{.Model}}" method="get">
|
||||
<!-- Basic Settings -->
|
||||
<div class="space-y-2">
|
||||
<!-- Prompt -->
|
||||
@@ -326,4 +326,4 @@
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -315,7 +315,7 @@
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ if eq . "FLAG_IMAGE" }}
|
||||
<a href="text2image/{{$backendCfg.Name}}" class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[var(--color-success)]/10 text-green-300 hover:bg-[var(--color-success)]/20 transition-colors" title="Image">
|
||||
<a href="image/{{$backendCfg.Name}}" class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[var(--color-success)]/10 text-green-300 hover:bg-[var(--color-success)]/20 transition-colors" title="Image">
|
||||
<i class="fas fa-image text-[8px] mr-1"></i>Image
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<a href="chat/" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
|
||||
<i class="fa-solid fa-comments text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Chat
|
||||
</a>
|
||||
<a href="text2image/" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
|
||||
<a href="image/" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
|
||||
<i class="fas fa-image text-[var(--color-primary)] mr-1.5 text-sm group-hover:scale-110 transition-transform"></i>Images
|
||||
</a>
|
||||
<a href="tts/" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-2 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-secondary)] flex items-center group text-sm">
|
||||
@@ -85,7 +85,7 @@
|
||||
<a href="chat/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
|
||||
<i class="fa-solid fa-comments text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Chat
|
||||
</a>
|
||||
<a href="text2image/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
|
||||
<a href="image/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
|
||||
<i class="fas fa-image text-[var(--color-primary)] mr-3 w-5 text-center text-sm"></i>Images
|
||||
</a>
|
||||
<a href="tts/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center text-sm">
|
||||
|
||||
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{{template "views/partials/head" .}}
|
||||
<script defer src="static/video.js"></script>
|
||||
|
||||
<body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] flex flex-col h-screen">
|
||||
<div class="flex flex-col flex-1 overflow-hidden">
|
||||
|
||||
{{template "views/partials/navbar" .}}
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- Two Column Layout: Settings on Left, Preview on Right -->
|
||||
<div class="flex flex-col lg:flex-row flex-1 gap-4 p-4 overflow-hidden">
|
||||
<!-- Left Column: Generation Settings -->
|
||||
<div class="flex-shrink-0 lg:w-1/4 flex flex-col min-h-0">
|
||||
<div class="card p-3 space-y-3 overflow-y-auto flex-1">
|
||||
<!-- Model Selection - Compact -->
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<label class="text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide flex-shrink-0">Model</label>
|
||||
</div>
|
||||
<select x-data="{ link : '' }" x-model="link" x-init="$watch('link', value => window.location = link)"
|
||||
id="model-select"
|
||||
class="input w-full p-1.5 text-xs"
|
||||
>
|
||||
<option value="" disabled class="text-[var(--color-text-secondary)]">Select a model</option>
|
||||
{{ $model:=.Model}}
|
||||
{{ range .ModelsConfig }}
|
||||
{{ $cfg := . }}
|
||||
{{ range .KnownUsecaseStrings }}
|
||||
{{ if eq . "FLAG_VIDEO" }}
|
||||
<option value="video/{{$cfg.Name}}" {{ if eq $cfg.Name $model }} selected {{end}} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{$cfg.Name}}</option>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ range .ModelsWithoutConfig }}
|
||||
<option value="video/{{.}}" {{ if eq . $model }} selected {{ end }} class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<input id="video-model" type="hidden" value="{{.Model}}">
|
||||
<form id="genvideo" action="video/{{.Model}}" method="get">
|
||||
<!-- Basic Settings -->
|
||||
<div class="space-y-2">
|
||||
<!-- Prompt -->
|
||||
<div class="space-y-1">
|
||||
<label for="input" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
|
||||
<i class="fas fa-magic mr-1.5 text-[var(--color-primary)]"></i>Prompt
|
||||
</label>
|
||||
<textarea
|
||||
id="input"
|
||||
name="input"
|
||||
placeholder="Describe the video you want to generate..."
|
||||
autocomplete="off"
|
||||
rows="3"
|
||||
class="input w-full p-1.5 text-xs resize-y"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Negative Prompt -->
|
||||
<div class="space-y-1">
|
||||
<label for="negative-prompt" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
|
||||
<i class="fas fa-ban mr-1.5 text-[var(--color-primary)]"></i>Negative Prompt
|
||||
</label>
|
||||
<textarea
|
||||
id="negative-prompt"
|
||||
name="negative-prompt"
|
||||
placeholder="Things to avoid in the video..."
|
||||
rows="2"
|
||||
class="input w-full p-1.5 text-xs resize-y"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Size Selection with Presets -->
|
||||
<div class="space-y-1">
|
||||
<label for="video-size" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
|
||||
<i class="fas fa-expand-arrows-alt mr-1.5 text-[var(--color-primary)]"></i>Video Size
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-1.5 mb-1.5">
|
||||
<button type="button" class="size-preset px-2 py-0.5 text-[10px] rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)]" data-size="256x256">256×256</button>
|
||||
<button type="button" class="size-preset px-2 py-0.5 text-[10px] rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)]" data-size="512x512">512×512</button>
|
||||
<button type="button" class="size-preset px-2 py-0.5 text-[10px] rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)]" data-size="768x768">768×768</button>
|
||||
<button type="button" class="size-preset px-2 py-0.5 text-[10px] rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)]" data-size="1024x1024">1024×1024</button>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="video-size"
|
||||
value="512x512"
|
||||
placeholder="e.g., 256x256, 512x512, 1024x1024"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Video Duration / FPS / Frames -->
|
||||
<div class="space-y-1">
|
||||
<label for="video-seconds" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
|
||||
<i class="fas fa-clock mr-1.5 text-[var(--color-primary)]"></i>Duration (seconds)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="video-seconds"
|
||||
name="seconds"
|
||||
min="1"
|
||||
max="60"
|
||||
placeholder="Leave empty for default"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="video-fps" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
|
||||
<i class="fas fa-film mr-1.5 text-[var(--color-primary)]"></i>FPS
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="video-fps"
|
||||
name="fps"
|
||||
min="1"
|
||||
max="60"
|
||||
value="16"
|
||||
placeholder="Frames per second"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label for="video-frames" class="block text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide">
|
||||
<i class="fas fa-images mr-1.5 text-[var(--color-primary)]"></i>Number of Frames
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="video-frames"
|
||||
name="num_frames"
|
||||
min="1"
|
||||
max="500"
|
||||
placeholder="Leave empty for default"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Settings (Collapsible) -->
|
||||
<div class="space-y-2">
|
||||
<button type="button" id="advanced-toggle" class="w-full flex items-center justify-between px-2 py-1.5 text-xs rounded text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors">
|
||||
<span><i class="fa-solid fa-sliders mr-1.5 text-[var(--color-primary)]"></i> Advanced Settings</span>
|
||||
<i class="fas fa-chevron-down text-[10px]" id="advanced-chevron"></i>
|
||||
</button>
|
||||
<div id="advanced-settings" class="hidden p-2 bg-[var(--color-bg-secondary)] border border-[var(--color-primary-border)]/20 rounded pl-4 border-l-2 border-[var(--color-bg-secondary)] space-y-2">
|
||||
<!-- Steps -->
|
||||
<div class="space-y-1">
|
||||
<label for="video-steps" class="block text-xs text-[var(--color-text-secondary)]">
|
||||
<i class="fas fa-step-forward mr-1.5 text-[var(--color-primary)]"></i>Steps
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="video-steps"
|
||||
name="step"
|
||||
min="1"
|
||||
max="100"
|
||||
placeholder="Leave empty for default"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Seed -->
|
||||
<div class="space-y-1">
|
||||
<label for="video-seed" class="block text-xs text-[var(--color-text-secondary)]">
|
||||
<i class="fas fa-seedling mr-1.5 text-[var(--color-primary)]"></i>Seed
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="video-seed"
|
||||
name="seed"
|
||||
min="0"
|
||||
placeholder="Leave empty for random"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- CFG Scale -->
|
||||
<div class="space-y-1">
|
||||
<label for="video-cfg-scale" class="block text-xs text-[var(--color-text-secondary)]">
|
||||
<i class="fas fa-sliders-h mr-1.5 text-[var(--color-primary)]"></i>CFG Scale
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="video-cfg-scale"
|
||||
name="cfg_scale"
|
||||
min="0"
|
||||
max="20"
|
||||
step="0.1"
|
||||
placeholder="Leave empty for default"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Inputs (Collapsible) -->
|
||||
<div class="space-y-2">
|
||||
<button type="button" id="image-inputs-toggle" class="w-full flex items-center justify-between px-2 py-1.5 text-xs rounded text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors">
|
||||
<span><i class="fa-solid fa-image mr-1.5 text-[var(--color-primary)]"></i> Image Inputs</span>
|
||||
<i class="fas fa-chevron-down text-[10px]" id="image-inputs-chevron"></i>
|
||||
</button>
|
||||
<div id="image-inputs-settings" class="hidden p-2 bg-[var(--color-bg-secondary)] border border-[var(--color-primary-border)]/20 rounded pl-4 border-l-2 border-[var(--color-bg-secondary)] space-y-2">
|
||||
<!-- Start Image (img2video) -->
|
||||
<div class="space-y-1">
|
||||
<label for="start-image" class="block text-xs text-[var(--color-text-secondary)]">
|
||||
<i class="fas fa-play-circle mr-1.5 text-[var(--color-primary)]"></i>Start Image (img2video)
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="start-image"
|
||||
name="start_image"
|
||||
accept="image/*"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- End Image -->
|
||||
<div class="space-y-1">
|
||||
<label for="end-image" class="block text-xs text-[var(--color-text-secondary)]">
|
||||
<i class="fas fa-stop-circle mr-1.5 text-[var(--color-primary)]"></i>End Image
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="end-image"
|
||||
name="end_image"
|
||||
accept="image/*"
|
||||
class="input p-1.5 text-xs w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
id="generate-btn"
|
||||
class="w-full px-2 py-1.5 text-xs rounded text-[var(--color-bg-primary)] bg-[var(--color-primary)] hover:bg-[var(--color-primary)]/90 transition-colors font-medium"
|
||||
>
|
||||
<i class="fas fa-video mr-1.5"></i>Generate Video
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Video Preview -->
|
||||
<div class="flex-grow lg:w-3/4 flex flex-col min-h-0">
|
||||
<div class="relative flex-1 min-h-0 overflow-y-auto">
|
||||
<!-- Loading Animation -->
|
||||
<div id="loader" class="hidden absolute inset-0 flex items-center justify-center bg-[var(--color-bg-primary)]/80 rounded-xl z-10">
|
||||
<div class="text-center">
|
||||
<svg class="animate-spin h-10 w-10 text-[var(--color-primary)] mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<p class="text-xs text-[var(--color-text-secondary)]">Generating video...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Placeholder when no videos -->
|
||||
<div id="result-placeholder" class="min-h-[400px] flex items-center justify-center flex-shrink-0">
|
||||
<p class="text-xs text-[var(--color-text-secondary)] italic text-center">Your generated videos will appear here</p>
|
||||
</div>
|
||||
<!-- Results container -->
|
||||
<div id="result" class="grid grid-cols-1 gap-4 pb-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Collapsible sections
|
||||
document.getElementById('advanced-toggle').addEventListener('click', function() {
|
||||
const settings = document.getElementById('advanced-settings');
|
||||
const chevron = document.getElementById('advanced-chevron');
|
||||
settings.classList.toggle('hidden');
|
||||
chevron.classList.toggle('fa-chevron-down');
|
||||
chevron.classList.toggle('fa-chevron-up');
|
||||
});
|
||||
|
||||
document.getElementById('image-inputs-toggle').addEventListener('click', function() {
|
||||
const settings = document.getElementById('image-inputs-settings');
|
||||
const chevron = document.getElementById('image-inputs-chevron');
|
||||
settings.classList.toggle('hidden');
|
||||
chevron.classList.toggle('fa-chevron-down');
|
||||
chevron.classList.toggle('fa-chevron-up');
|
||||
});
|
||||
|
||||
// Size preset buttons
|
||||
document.querySelectorAll('.size-preset').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const size = this.getAttribute('data-size');
|
||||
document.getElementById('video-size').value = size;
|
||||
// Update active state
|
||||
document.querySelectorAll('.size-preset').forEach(btn => {
|
||||
btn.classList.remove('bg-[var(--color-primary)]', 'text-white');
|
||||
});
|
||||
this.classList.add('bg-[var(--color-primary)]', 'text-white');
|
||||
});
|
||||
});
|
||||
|
||||
// Set initial active size preset
|
||||
document.querySelector('.size-preset[data-size="512x512"]').classList.add('bg-[var(--color-primary)]', 'text-white');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -97,7 +97,7 @@ For more information on VRAM management, see [VRAM and Memory Management]({{%rel
|
||||
| `--opaque-errors` | `false` | If true, all error responses are replaced with blank 500 errors. This is intended only for hardening against information leaks and is normally not recommended | `$LOCALAI_OPAQUE_ERRORS` |
|
||||
| `--use-subtle-key-comparison` | `false` | If true, API Key validation comparisons will be performed using constant-time comparisons rather than simple equality. This trades off performance on each request for resilience against timing attacks | `$LOCALAI_SUBTLE_KEY_COMPARISON` |
|
||||
| `--disable-api-key-requirement-for-http-get` | `false` | If true, a valid API key is not required to issue GET requests to portions of the web UI. This should only be enabled in secure testing environments | `$LOCALAI_DISABLE_API_KEY_REQUIREMENT_FOR_HTTP_GET` |
|
||||
| `--http-get-exempted-endpoints` | `^/$,^/browse/?$,^/talk/?$,^/p2p/?$,^/chat/?$,^/text2image/?$,^/tts/?$,^/static/.*$,^/swagger.*$` | If `--disable-api-key-requirement-for-http-get` is overridden to true, this is the list of endpoints to exempt. Only adjust this in case of a security incident or as a result of a personal security posture review | `$LOCALAI_HTTP_GET_EXEMPTED_ENDPOINTS` |
|
||||
| `--http-get-exempted-endpoints` | `^/$,^/browse/?$,^/talk/?$,^/p2p/?$,^/chat/?$,^/image/?$,^/text2image/?$,^/tts/?$,^/static/.*$,^/swagger.*$` | If `--disable-api-key-requirement-for-http-get` is overridden to true, this is the list of endpoints to exempt. Only adjust this in case of a security incident or as a result of a personal security posture review | `$LOCALAI_HTTP_GET_EXEMPTED_ENDPOINTS` |
|
||||
|
||||
## P2P Flags
|
||||
|
||||
|
||||
Reference in new issue
Block a user