화이트 존 FLUX1 인터페이스가 닫혀서 이 사이트의 트래픽이 크게 손실되었습니다... FLUX1 API를 무료로 배포하는 방법을 알아냈습니다!

이 사이트의 무료 리드 생성 도구(https://api-flux1.api4gpt.com/?prompt=)의 기본 서비스는 타사에서 URL에 프롬프트 단어를 연결하기 위해 제공하는 FLUX1 API였는데, 최근 이 서비스가 종료되어 이 사이트의 일일 방문자 수가 많이 줄었습니다. 이 API는 다음과 같이 읽을 수 있습니다. 풀 블러드 FLUX.1: 로컬 배포 없이 FLUX 온라인 사용 이 글의 마지막에 설명되어 있습니다. FLUX1 API를 사용하여 트래픽을 유치하는 방법에 대해서는이 사이트에서 공개적으로 공유 된 Wenxin Intelligent Body에 대한 기사를 검색 할 수 있지만 안타깝게도 많은 사람들이 그 중요성을 깨닫지 못합니다.

다시 주제로 돌아와서, 유료 FLUX1 API는 정말 저렴하지 않다고 들었습니다. 실리콘 기반 흐름 무료 FLUX1 API를 제공하지만 코드를 모르고 영어 단어가 제한되어 있고 서비스를 배포 할 무료 서버가 없다는 것을 알고 있습니다. ......

이 글은 주로 아이디어를 공유하기 위한 것으로, 완전한 운영 프로세스를 제공하지 않으며, 글의 마지막에는 직접 사용 가능한 프로젝트 코드를 제공합니다.

사고 모드로 전환...

1. 실리콘 기반 흐름의 자유 인터페이스가 안정적입니까?

2. 무료 인터페이스가 다시 닫히면 어떻게 해야 하나요?

3. 코드 작성 방법...

4. 가장 큰 문제는 기본 서비스로서 빠른 전환 서비스의 경우 기존 사용자의 사용에 영향을 미치지 않고 액세스 주소가 변경되지 않는 것이 가장 큰 문제인데, 비용을 지불하면 사용 비용을 돌려받을 수 있다면 왜 안 될까요?

프로젝트 STH.

1. 동일한 형식의 URL을 만들 예정이지만 이 URL은 내 URL이며, 도메인 이름 img.kdjingpai.com을 선택합니다.

2. 빅 모델에 입력되는 간단한 API 인터페이스 문서는 실행 가능한 코드를 작성할 수 있어야 합니다.

3. 클라우드플레어 워커에 배포할 수 있기를 바랍니다(실제로 워커가 무엇을 지원하는지 이해하지 못함).

4. 과도한 일부 요구 사항, 원래 인터페이스는 단서 단어 연결 만 지원하며 실제로 일부 요구 사항이 충족되지 않았습니다.

워크플로

실리콘 모빌리티용 무료 FLUX 인터페이스 설명서를 찾아 인터페이스 주소와 KEY를 직접 찾아보세요.

문서를 수집하여 작업자 코드를 생성하기 위한 명확한 메시지와 함께 클로드에게 붙여넣었고, 첫 번째 라운드에서 실행 가능한 코드가 생성되었습니다.

사실, 여기 끝에서 도메인 이름에 바인딩 된 작업자에 대한 코드가 국내 일반 액세스에있을 수있는 한 원래 인터페이스의 일부 요구 사항이 충족되지 않았으므로 코드를 다시 기반으로 계속 최적화 할 수 있습니다.

수요 1

URL에서 생성된 이미지의 크기를 변경할 수 있으며, 이미지 크기를 입력하지 않으면 기본적으로 512x512 이미지가 생성됩니다(새 코드를 얻기 위해 큰 모델에 입력됨).

이쯤 되면 클로드 할당량이 부족할 수 있다는 것을 알게 될 것입니다. 클로드 미러 스테이션: 소네트, 하이쿠, 오푸스 전 모델 무료 제공! 바로 사용할 수 있습니다.

수요 2

프롬프트 단어 입력 중국어가 정상적이고 올바르게 생성 된 이미지가 될 수 없으므로 영어로 변환하는 프롬프트 부분은 현재 무료 번역 인터페이스를 완료하기 위해 큰 모델이나 번역 인터페이스가 너무 게으르고 일반성이 강하지 않으므로 액세스하고 싶습니다. 무료 빅 모델 API 여기서는 Wisdom Spectrum의 GLM-4-Flash를 선택했습니다.

GLM-4-Flash 인터페이스 설명서를 입력하고 필요에 따라 코드를 생성하세요:

번역을 처리하기 위해 코드에 새로운 스니펫이 추가되었는데, 안타깝게도 한 번의 프롬프트에서 제대로 실행되지 않아 후속 테스트는 수행되지 않았습니다:

수요 3

사용자가 입력 한 프롬프트 단어가 너무 단순하고 생성 된 이미지 구성 및 요소가 그렇게 좋아 보이지 않을 수 있습니다. 요구 사항 2의 큰 모델 API에서 차용하여 사용자가 입력 한 프롬프트 단어를 최적화하고, 프롬프트 단어를 매개 변수로 최적화하는 기능을 URL에 연결할 수 있으며, 이번에는 ChatGPT를 사용하여 대화를 나누고 다음 코드를 얻었으며 물론 구성 최적화 방법에 대한 지침은 제가 별도로 제공합니다:

지나치게 복잡한 명령어, 생성된 이미지가 모양을 벗어나기 쉽고, 최적화된 큐워드의 출력 형식이 안정적이지 않아 요구 사항 3의 큐워드에 대해서만 별도의 작업으로 여러 차례 최적화를 수행하여 다음과 같은 명령어를 얻었습니다:

수요 4

기술 백인으로서 명령 줄에서 작동하는 데 매우 익숙하지 않고 오류 메시지를 보지 않을 것이므로 큰 모델에 GUI 인터페이스를 생성하도록 요청했으며, 모든 예외에서 코드 실행도 인터페이스를 직접 표시하여 사용 편의성의 일일 디버깅을 해결해야합니다.

이 소박한 인터페이스를 경험해보세요: https://img.kdjingpai.com/GUI/ (공공 서비스에서는 사용하지 마세요, 제발...)

최종 제품

도움말은 사용자 경험을 개선하기 위한 것이 아니라 큰 모델을 사고의 맥락에서 자연스럽게 수정하여 오류를 피할 수 있도록 코드의 일부로 그래픽 인터페이스를 제공할 뿐만 아니라 코드에 작성됩니다. 그러나 지나치게 긴 코드는 여전히 큰 모델을 잘못 해석할 수 있으므로 절충이 필요합니다.

전체 주석을 추가하고 도움말을 사용하는 것은 코드를 작성하는 일반 사용자에게 좋은 습관입니다.

다음으로 Claude에게 여러 차례에 걸쳐 코드를 최적화해 달라고 요청했고 다음과 같은 완전한 코드를 얻었습니다. 예를 들어, 큰 모델에서는 프로그램의 안전을 보장하고 판단 횟수를 줄이며 요청 지연 로직과 같은 문제를 처리하기 위해 변수를 추상화하는 것이 더 낫다고 말하는 등 아직 최적화할 여지가 많이 남아 있습니다. 직접 사용하시려면 복사하여 붙여넣으세요:

전체 배포 문서는 다음 링크에서 확인할 수 있습니다: https://github.com/pptt121212/freefluxapi

// Constants
const IMAGE_API_URL = 'https://api.siliconflow.cn/v1/image/generations';
const IMAGE_API_KEY = '';
const PROCESS_API_URL = 'https://open.bigmodel.cn/api/paas/v4/chat/completions';
const PROCESS_API_KEY = '';
const DEFAULT_SIZE = '512x512';
const SIZE_REGEX = /^\d+x\d+$/;
const NON_ASCII_REGEX = /[^\x00-\x7F]/;

addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
try {
const url = new URL(request.url);

// Check if the request is for the GUI page
if (url.pathname === '/GUI/') {
return new Response(getGuiPage(), {
headers: { 'Content-Type': 'text/html' }
});
}

const prompt = url.searchParams.get('prompt');

// Check if the prompt is valid
if (!prompt) {
return new Response(getUsageInstructions(), {
headers: { 'Content-Type': 'text/html' }
});
}

const { size, optimization } = parseRequestParams(request);
const processedPrompt = await getProcessedPrompt(prompt, optimization);
const imageUrl = await getImageUrl(processedPrompt, size);
return await fetchAndReturnImage(imageUrl);
} catch (error) {
return new Response(error.message, { status: error.status || 500 });
}
}

function parseRequestParams(request) {
const url = new URL(request.url);
const size = url.searchParams.get('size') || DEFAULT_SIZE;
const optimization = url.searchParams.get('optimization') === '1';

if (!SIZE_REGEX.test(size)) {
throw new Error('Invalid size parameter. Use format: widthxheight');
}

return { size, optimization };
}

async function getProcessedPrompt(prompt, optimization) {
if (!NON_ASCII_REGEX.test(prompt) && !optimization) {
return prompt;
}
return processPrompt(prompt, optimization);
}

async function getImageUrl(prompt, size) {
const response = await fetch(IMAGE_API_URL, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Authorization': `Bearer ${IMAGE_API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "black-forest-labs/FLUX.1-schnell",
prompt,
image_size: size
})
});

if (!response.ok) {
throw new Error(`API error: ${response.status}`);
}

const data = await response.json();
const imageUrl = data?.images?.[0]?.url;

if (!imageUrl) {
throw new Error('Unexpected API response format');
}

return imageUrl;
}

async function fetchAndReturnImage(imageUrl) {
const imageResponse = await fetch(imageUrl);
const imageBlob = await imageResponse.blob();
return new Response(imageBlob, {
headers: { 'Content-Type': imageResponse.headers.get('Content-Type') }
});
}

async function processPrompt(text, optimize) {
const content = optimize 
? `
# 优化以下图像prompt，保留prompt主要元素基础上使细节、构图更加丰富：
## 图像prompt：
${text}
## 优化要求
1. 优化后的图像prompt是一组<英文TAG标签>，每个TAG应该遵循构图的基本原则，将画风、构图、主体、动作、场景、元素、按顺序进行描述。
2. <英文TAG标签>中每个词组用逗号","分割，逗号","前后不允许有"空格"。
# 仅仅输出优化后的图像prompt，不要有其他说明：
`
: `请将以下内容翻译为英文，保持原意：${text}`;

const response = await fetch(PROCESS_API_URL, {
method: 'POST',
headers: {
'Authorization': `Bearer ${PROCESS_API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "GLM-4-Flash",
messages: [{ role: "user", content }]
})
});

if (!response.ok) {
throw new Error(`Translation/Optimization API error: ${response.status}`);
}

const data = await response.json();
return data.choices?.[0]?.message?.content?.trim() || text;
}

// 函数：返回使用说明的HTML内容
function getUsageInstructions() {
return `
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用说明</title>
</head>
<body>
<h1>使用说明</h1>
<p>欢迎使用图像生成 API！请按照以下步骤生成您的图像：</p>

<h2>1. 请求格式</h2>
<p>访问 API 的 URL 格式如下：</p>
<pre>https://your-worker-url/?prompt={您的提示}&size={图像尺寸}&optimization={优化选项}</pre>

<h3>参数说明</h3>
<ul>
<li><strong>prompt</strong>: (必填) 您想要生成图像的描述文本，例如“一位女孩”。</li>
<li><strong>size</strong>: (可选) 图像的尺寸，格式为 <code>宽度x高度</code>，默认为 <code>512x512</code>。例如：<code>256x256</code> 或 <code>1024x768</code>。</li>
<li><strong>optimization</strong>: (可选) 是否进行优化，值为 <code>1</code> 表示进行优化，值为 <code>0</code> 或不提供该参数表示不进行优化。</li>
</ul>

<h2>2. 返回结果</h2>
<p>访问 API 后，您将获得生成的图像。若请求成功，您将看到生成的图像。如果请求失败，您会看到错误信息。</p>

<h2>3. 示例请求</h2>
<p>您可以通过以下示例请求生成图像：</p>
<pre>https://your-worker-url/?prompt=一位女孩&size=512x512&optimization=1</pre>
<p>此请求将生成一幅描述为“一位女孩”的图像，并将其大小设置为 512x512 像素，并进行优化。</p>

<h2>4. 注意事项</h2>
<ul>
<li>确保您的 <code>prompt</code> 参数包含有效的描述。</li>
<li><code>size</code> 参数应遵循 <code>宽度x高度</code> 格式。</li>
<li>如果使用优化功能，确保 <code>prompt</code> 中包含非 ASCII 字符。</li>
</ul>

<p>如有任何问题，请随时联系支持团队！</p>
</body>
</html>
`;
}

// 添加图形化用户界面功能
function getGuiPage() {
return `
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像生成 GUI</title>
</head>
<body>
<h1>图像生成</h1>
<form id="imageForm">
<label for="prompt">图像描述:</label><br>
<input type="text" id="prompt" required><br><br>

<label for="size">图像尺寸 (格式: 宽度x高度，默认: 512x512):</label><br>
<input type="text" id="size" value="512x512" required><br><br>

<label for="optimization">是否优化:</label><br>
<select id="optimization">
<option value="0">不优化</option>
<option value="1">优化</option>
</select>
<p>优化选项说明: 选择“优化”将使生成的图像具有更丰富的细节和构图。</p><br>

<button type="submit">生成图像</button>
</form>

<h2>生成结果:</h2>
<div id="result"></div>
<div id="status"></div>

<script>
document.getElementById('imageForm').addEventListener('submit', async (event) => {
event.preventDefault();
const prompt = document.getElementById('prompt').value;
const size = document.getElementById('size').value;
const optimization = document.getElementById('optimization').value;

// 更新状态信息
document.getElementById('status').innerText = '正在处理请求...';

try {
const response = await fetch(\`/\?prompt=\${encodeURIComponent(prompt)}&size=\${size}&optimization=\${optimization}\`);
if (response.ok) {
const blob = await response.blob();
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
img.style.maxWidth = '100%';
document.getElementById('result').innerHTML = '';
document.getElementById('result').appendChild(img);
document.getElementById('status').innerText = '图像生成成功！';
} else {
document.getElementById('result').innerText = '生成图像失败: ' + response.statusText;
document.getElementById('status').innerText = '请求失败，状态码: ' + response.status;
}
} catch (error) {
document.getElementById('result').innerText = '生成图像过程中出现错误: ' + error.message;
document.getElementById('status').innerText = '错误信息: ' + error.message;
}
});
</script>
</body>
</html>
`;
}

사람들은 자신이 원하는 것을 원하는 경향이 있습니다...

최종 git 코드는 많은 세부 사항을 최적화하며, 특히 개별적으로 관리해야 하는 KEY와 멀티-KEY 폴링 로드를 추상화합니다.

그런 다음 코드에 따라 워드프레스 이미지 생성 위젯이 생성되며, 글 페이지 오른쪽에서 확인할 수 있습니다.

한 가지 아쉬운 점은 사용자가 URL을 반복해서 열거나 새로고침할 때 이미지가 다시 생성되지 않도록 생성된 이미지와 해당 URL의 캐시를 보관하고 싶다는 것입니다. 이 기능의 로직이 복잡해서 지금은 포기했습니다.

이 시점까지 백인의 코드에 대한 완전한 이해 부족은 매우 간단한 도구를 작성하는 것으로 간주되며 논리적 빗질의 전체 코드 생성 프로세스가 훌륭한 지침보다 더 중요하다는 것을 기억하고 단계별로 합리적인 기능 반복의 논리를 메인에서 두 번째로, 작은 것에서 큰 것으로 정렬하십시오.

이 API는 생성된 이미지의 URL을 큐워드에 연결하는 데 사용됩니다:텍스트, 이미지 및 추천 URL을 생성하여 웹사이트로 트래픽을 유도하세요.

코딩을 할 줄 모르는 사람이 아주 완벽한 프로젝트 세트를 작성할 수 있다고 믿지 말고, 어쨌든 저도 의심스럽고, 백인 남자에게는 일종의 한계 인이 훈련은 9 시간 동안 지속되었으므로 인내심을 가지고 읽어 주셔서 감사합니다.