AWS JavaScript WordPress = 인공 지능을 사용한 재미있는 콘텐츠 자동화 전략

몇 달 전 저는 기술 부문에 초점을 맞춘 클라이언트를 위해 AI 생성 콘텐츠에 관한 프로젝트에 공동작업을 시작했습니다. 내 역할은 주로 Nuxt 프런트엔드용 헤드리스 CMS로 WordPress를 사용하여 SSG를 설정하는 데 중점을 두었습니다.

클라이언트는 해당 분야에 영향을 미치는 다양한 트렌드나 상황에 대해 일주일에 두 번씩 기사를 작성하곤 했으며, 사이트 트래픽과 기사 출력을 늘리기 위해 AI를 사용하여 기사를 생성하기로 결정했습니다.

얼마 후 올바른 프롬프트를 통해 고객은 사람이 쓴 기사와 정확히 일치하는 정보를 얻었지만 그것이 기계로 만들어진 것인지 알아내기가 매우 어렵습니다.

다른 기능을 담당하기 위해 옮긴 후에도 특정 질문을 계속해서 받곤 했습니다.

앗, 이 기사의 추천 이미지를 업데이트해주실 수 있나요?

2주 동안 매일 포스팅을 업데이트한 끝에 소소한 유레카의 순간이 있었습니다.

인공지능을 사용하여 해당 기사에 대한 추천 이미지 생성을 자동화하면 어떨까요?

우리는 이미 게시물 작성을 자동화했는데 추천 이미지는 왜 자동화하지 않나요?

여가 시간에 컴퓨터에서 생성적 LLM을 실험하면서 이 부가 퀘스트를 어떻게 처리할지에 대한 확실한 아이디어를 얻었습니다. 나는 고객에게 문제가 무엇인지, 무엇을 하고 싶은지, 무엇이 장점이 될 것인지 자세히 설명하는 메시지를 보냈고 설득할 필요 없이 이 기능에 대한 작업 승인을 얻었고 즉시 작업에 착수했습니다. 나의 첫걸음.

1. 솔루션의 모습을 설계합니다.

현지에서 모델을 운영하는 것을 어느 정도 접해 봤기 때문에 해당 모델을 자체 호스팅하는 것이 불가능하다는 것을 즉시 알았습니다. 이를 버리고 텍스트 프롬프트를 기반으로 이미지를 생성하는 API를 다루기 시작했습니다.

추천 이미지는 메인 구성 그래픽과 눈길을 끄는 태그라인의 두 부분으로 구성됩니다.

구성된 그래픽은 기사와 관련된 일부 요소로, 브랜딩에 따른 멋진 효과를 얻기 위해 일부 블렌드 모드를 적용한 일부 색상과 질감으로 멋지게 배열됩니다.

태그라인은 8~12단어의 짧은 문장이었고 그 아래에 간단한 그림자가 있었습니다.

테스트를 통해 이미지 생성을 위해 AI 경로를 추구하는 것이 실용적이지 않다는 것을 깨달았습니다. 이미지 품질이 기대에 미치지 못했고, 사용을 정당화하기에는 프로세스에 너무 많은 시간이 소요되었습니다. 이를 고려하면 실행 시간이 비용에 직접적인 영향을 미치는 AWS Lambda 함수로 실행됩니다.

그것을 버리고 플랜 B를 선택했습니다. JavaScript의 Canvas API를 사용하여 이미지와 디자인 자산을 함께 매싱하는 것입니다.

자세히 살펴보면 주로 5가지 간단한 게시물 스타일이 있었고 약 4가지 유형의 텍스처가 있었고 그 중 3개는 동일한 텍스트 정렬, 스타일 및 위치를 사용했습니다. 계산을 좀 하고 나서 다음과 같은 생각이 들었습니다.

3가지 유형의 게시물이 동일한 텍스트 스타일을 갖고 있다는 점을 고려하면 사실상 하나의 템플릿이었습니다. 이를 해결한 후 태그라인 생성기로 이동했습니다. 기사의 내용과 제목을 기반으로 태그라인을 만들고 싶었습니다. 저는 회사가 이미 비용을 지불하고 있다는 점을 고려하여 ChatGPT의 API를 사용하기로 결정했고, 몇 가지 실험과 프롬프트 조정 후에 태그라인 생성기에 대한 아주 좋은 MVP를 얻었습니다.

작업에서 가장 어려운 두 가지 부분을 파악한 후 Figma에서 서비스의 최종 아키텍처에 대한 다이어그램을 작성하는 데 시간을 보냈습니다.

2. 람다 코딩하기

게시물 콘텐츠를 분석하고, 태그라인을 생성하고, 추천 이미지를 조합할 수 있는 Lambda 함수를 만드는 것이 계획이었습니다. 모두 WordPress와 완벽하게 통합되었습니다.

몇 가지 코드를 제공하겠지만 ke에게 전반적인 아이디어를 전달할 만큼만 제공하겠습니다.

콘텐츠 분석

Lambda 함수는 수신 이벤트 페이로드에서 필요한 매개변수를 추출하는 것으로 시작됩니다.

const { 제목: request_title, 콘텐츠, 백엔드, app_password} = JSON.parse(event.body);

제목 및 내용:

기사의 맥락을 제공합니다.

• 백엔드: 이미지 업로드를 위한 WordPress 백엔드 URL입니다.
• app_password: Wordpress Rest API를 사용하여 내 사용자로 업로드하는 데 사용할 인증 토큰입니다.
• 태그라인 생성
이 기능의 첫 번째 주요 작업은 OpenAI의 API를 사용하여 기사 제목과 내용을 기반으로 클릭할 가치가 있는 태그라인을 만드는 analyzeContent 함수를 사용하여 태그라인을 생성하는 것입니다.

저희 함수는 게시물 제목과 내용을 사용하지만 태그라인, 게시물 감정을 반환하여 게시물이 긍정적인지, 부정적인지, 중립적인 의견인지, 그리고 S&P 지수 기업의 선택적인 회사 기호를 알려줍니다.

const { 태그라인, 감정, 회사 } = analyzeContent({ 제목: request_title, 콘텐츠 });

대기

태그라인이 이미지의 미학에 직접적인 영향을 미치기 때문에 이 단계는 매우 중요합니다.

추천 이미지 만들기

다음으로 generateImage 함수가 시작됩니다.

이 함수는 다음을 처리합니다.

• 구성을 디자인합니다.
• 질감, 색상, 브랜딩 요소를 레이어링합니다.
• 효과 적용 및 제목 만들기

작동 방식에 대한 단계별 분석은 다음과 같습니다.

generateImage 기능은 빈 캔버스를 설정하고 크기를 정의하며 모든 디자인 요소를 처리할 준비를 하는 것으로 시작됩니다.

let buffer;

buffer = await generateImage({
    title: tagline,
    company_logo: company_logo,
    sentiment: sentiment,
});

여기서 사전 정의된 자산 컬렉션에서 임의의 배경 이미지가 로드됩니다. 이러한 이미지는 게시물 전반에 걸쳐 충분한 다양성을 허용하면서 기술 중심의 브랜딩에 맞게 선별되었습니다. 배경 이미지는 감성에 따라 무작위로 선택됩니다.

각 배경 이미지가 멋지게 보이도록 가로 세로 비율에 따라 크기를 동적으로 계산했습니다. 이렇게 하면 시각적 균형을 그대로 유지하면서 왜곡을 방지할 수 있습니다.

태그라인 추가

태그라인은 짧지만 몇 가지 규칙에 따라 이 영향력 있는 문장은 관리 가능한 부분으로 분할되며 줄의 단어 수, 단어 길이 등에 따라 길이나 캔버스 크기에 관계없이 항상 읽을 수 있도록 동적으로 스타일이 지정됩니다. .

const COLOURS = {
        BLUE: "#33b8e1",
        BLACK: "#000000",
    }

    const __filename = fileURLToPath(import.meta.url);
    const __dirname = path.dirname(__filename);
    const images_path = path.join(__dirname, 'images/');
    const files_length = fs.readdirSync(images_path).length;
    const images_folder = process.env.ENVIRONMENT === "local"
        ? "./images/" : "/var/task/images/";


    registerFont("/var/task/fonts/open-sans.bold.ttf", { family: "OpenSansBold" });
    registerFont("/var/task/fonts/open-sans.regular.ttf", { family: "OpenSans" });


    console.log("1. Created canvas");

    const canvas = createCanvas(1118, 806);

    let image = await loadImage(`${images_folder}/${Math.floor(Math.random() * (files_length - 1 + 1)) + 1}.jpg`);


    let textBlockHeight = 0;

    console.log("2. Image loaded");

    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const aspectRatio = image.width / image.height;


    console.log("3. Defined ASPECT RATIO",)

    let drawWidth, drawHeight;
    if (image.width > image.height) {
        // Landscape orientation: fit by width
        drawWidth = canvasWidth;
        drawHeight = canvasWidth / aspectRatio;
    } else {
        // Portrait orientation: fit by height
        drawHeight = canvasHeight;
        drawWidth = canvasHeight * aspectRatio;
    }

    // Center the image
    const x = (canvasWidth - drawWidth) / 2;
    const y = (canvasHeight - drawHeight) / 2;
    const ctx = canvas.getContext("2d");
    console.log("4. Centered Image")
    ctx.drawImage(image, x, y, drawWidth, drawHeight);

마지막으로 캔버스가 PNG 버퍼로 변환됩니다.

console.log("4.1 Text splitting");
if (splitText.length === 1) {

    const isItWiderThanHalf = ctx.measureText(splitText[0]).width > ((canvasWidth / 2) + 160);
    const wordCount = splitText[0].split(" ").length;

    if (isItWiderThanHalf && wordCount > 4) {

        const refactored_line = splitText[0].split(" ").reduce((acc, curr, i) => {
            if (i % 3 === 0) {
                acc.push([curr]);
            } else {
                acc[acc.length - 1].push(curr);
            }
            return acc;
        }, []).map((item) => item.join(" "));

        refactored_line[1] = "[s]" + refactored_line[1] + "[s]";

        splitText = refactored_line

    }
}

let tagline = splitText.filter(item => item !== '' && item !== '[br]' && item !== '[s]' && item !== '[/s]' && item !== '[s]');
let headlineSentences = [];
let lineCounter = {
    total: 0,
    reduced_line_counter: 0,
    reduced_lines_indexes: []
}

console.log("4.2 Tagline Preparation", tagline);

for (let i = 0; i < tagline.length; i++) {
    let line = tagline[i];

    if (line.includes("[s]") || line.includes("[/s]")) {

        const finalLine = line.split(/(\[s\]|\[\/s\])/).filter(item => item !== '' && item !== '[s]' && item !== '[/s]');

        const lineWidth = ctx.measureText(finalLine[0]).width
        const halfOfWidth = canvasWidth / 2;

        if (lineWidth > halfOfWidth && finalLine[0]) {

            let splitted_text = finalLine[0].split(" ").reduce((acc, curr, i) => {

                const modulus = finalLine[0].split(" ").length >= 5 ? 3 : 2;
                if (i % modulus === 0) {
                    acc.push([curr]);
                } else {
                    acc[acc.length - 1].push(curr);
                }
                return acc;
            }, []);

            let splitted_text_arr = []

            splitted_text.forEach((item, _) => {
                let lineText = item.join(" ");

                item = lineText

                splitted_text_arr.push(item)
            })

            headlineSentences[i] = splitted_text_arr[0] + '/s/'

            if (splitted_text_arr[1]) {
                headlineSentences.splice(i + 1, 0, splitted_text_arr[1] + '/s/')
            }
        } else {
            headlineSentences.push("/s/" + finalLine[0] + "/s/")
        }


    } else {
        headlineSentences.push(line)
    }
}

console.log("5. Drawing text on canvas", headlineSentences);

const headlineSentencesLength = headlineSentences.length;
let textHeightAccumulator = 0;

for (let i = 0; i < headlineSentencesLength; i++) {
    headlineSentences = headlineSentences.filter(item => item !== '/s/');
    const nextLine = headlineSentences[i + 1];
    if (nextLine && /^\s*$/.test(nextLine)) {
        headlineSentences.splice(i + 1, 1);
    }

    let line = headlineSentences[i];

    if (!line) continue;
    let lineText = line.trim();

    let textY;

    ctx.font = " 72px OpenSans";

    const cleanedUpLine = lineText.includes('/s/') ? lineText.replace(/\s+/g, ' ') : lineText;
    const lineWidth = ctx.measureText(cleanedUpLine).width
    const halfOfWidth = canvasWidth / 2;

    lineCounter.total += 1

    const isLineTooLong = lineWidth > (halfOfWidth + 50);

    if (isLineTooLong) {

        if (lineText.includes(':')) {
            const split_line_arr = lineText.split(":")
            if (split_line_arr.length > 1) {
                lineText = split_line_arr[0] + ":";
                if (split_line_arr[1]) {
                    headlineSentences.splice(i + 1, 0, split_line_arr[1])
                }
            }
        }

        ctx.font = "52px OpenSans";

        lineCounter.reduced_line_counter += 1

        if (i === 0 && headlineSentencesLength === 2) {
            is2LinesAndPreviewsWasReduced = true
        }


        lineCounter.reduced_lines_indexes.push(i)

    } else {

        if (i === 0 && headlineSentencesLength === 2) {
            is2LinesAndPreviewsWasReduced = false
        }


    }

    if (lineText.includes("/s/")) {

        lineText = lineText.replace(/\/s\//g, "");

        if (headlineSentencesLength > (i + 1) && i < headlineSentencesLength - 1 && nextLine) {

            if (nextLine.slice(0, 2).includes("?") && nextLine.length < 3) {
                lineText += '?';
                headlineSentences.pop();
            }

            if (nextLine.slice(0, 2).includes(":")) {
                lineText += ':';
                headlineSentences[i + 1] = headlineSentences[i + 1].slice(2);
            }

        }

        let lineWidth = ctx.measureText(lineText).width


        let assignedSize;


        if (lineText.split(" ").length <= 2) {

            if (lineWidth > (canvasWidth / 2.35)) {

                ctx.font = "84px OpenSansBold";

                assignedSize = 80

            } else {

                ctx.font = "84px OpenSansBold";

                assignedSize = 84

            }
        } else {


            if (i === headlineSentencesLength - 1 && lineWidth < (canvasWidth / 2.5) && lineText.split(" ").length === 3) {

                ctx.font = "84px OpenSansBold";
                assignedSize = 84

            } else {

                lineCounter.reduced_line_counter += 1;

                ctx.font = "52px OpenSansBold";
                assignedSize = 52

            }

            lineCounter.reduced_lines_indexes.push(i)

        }

        lineWidth = ctx.measureText(lineText).width



        if (lineWidth > (canvasWidth / 2) + 120) {

            if (assignedSize === 84) {
                ctx.font = "72px OpenSansBold";
            } else if (assignedSize === 80) {
                ctx.font = "64px OpenSansBold";

                textHeightAccumulator += 8
            } else {
                ctx.font = "52px OpenSansBold";
            }
        }



    } else {

        const textWidth = ctx.measureText(lineText).width


        if (textWidth > (canvasWidth / 2)) {
            ctx.font = "44px OpenSans";
            textHeightAccumulator += 12
        } else if (i === headlineSentencesLength - 1) {
            textHeightAccumulator += 12
        }

    }

    ctx.fillStyle = "white";
    ctx.textAlign = "center";

    const textHeight = ctx.measureText(lineText).emHeightAscent;

    textHeightAccumulator += textHeight;

    if (headlineSentencesLength == 3) {
        textY = (canvasHeight / 3)
    } else if (headlineSentencesLength == 4) {
        textY = (canvasHeight / 3.5)
    } else {
        textY = 300
    }

    textY += textHeightAccumulator;

    const words = lineText.split(' ');
    console.log("words", words, lineText, headlineSentences)
    const capitalizedWords = words.map(word => {
        if (word.length > 0) return word[0].toUpperCase() + word.slice(1)
        return word
    });
    const capitalizedLineText = capitalizedWords.join(' ');

    ctx.fillText(capitalizedLineText, canvasWidth / 2, textY);

}

마지막으로!!! WordPress에 이미지 업로드

이미지 버퍼를 성공적으로 생성한 후 uploadImageToWordpress 함수가 호출됩니다.

이 기능은 WordPress용 이미지를 인코딩하여 REST API를 사용하여 WordPress에 이미지를 보내는 무거운 작업을 처리합니다.

이 함수는 먼저 공백과 특수 문자를 정리하여 파일 이름으로 사용할 태그라인을 준비합니다.

const buffer = canvas.toBuffer("image/png");
return buffer;

그런 다음 이미지 버퍼는 WordPress API와 호환되도록 Blob 개체로 변환됩니다.

const 파일 = new Blob([버퍼], { type: "image/png" });

API 요청 준비하기 함수는 인코딩된 이미지와 태그라인을 사용하여 FormData 객체를 구축하고 접근성을 위한 alt_text 및 컨텍스트를 위한 캡션과 같은 선택적 메타데이터를 추가합니다.

const createSlug = (string) => {
    return string.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
};

const image_name = createSlug(tagline);

인증을 위해 사용자 이름과 애플리케이션 비밀번호는 Base64로 인코딩되어 요청 헤더에 포함됩니다.

formData.append("file", file, image_name + ".png");
formData.append("alt_text", `${tagline} image`);
formData.append("caption", "Uploaded via API");

이미지 보내기 POST 요청은 준비된 데이터 및 헤더와 함께 WordPress 미디어 엔드포인트에 이루어지며 응답을 기다린 후 성공 또는 오류를 확인합니다.

const credentials = `${username}:${app_password}`;
const base64Encoded = Buffer.from(credentials).toString("base64");

성공하면 동일한 미디어 응답을 람다로 반환합니다.

내 람다의 최종 모습은 이렇습니다.

const response = await fetch(`${wordpress_url}wp-json/wp/v2/media`, {
    method: "POST",
    headers: {
        Authorization: "Basic " + base64Encoded,
        contentType: "multipart/form-data",
    },
    body: formData,
});

if (!response.ok) {
    const errorText = await response.text();
    throw new Error(`Error uploading image: ${response.statusText}, Details: ${errorText}`);
}

제가 대본으로 제작한 샘플 이미지입니다. 프로덕션에서는 사용되지 않으며 이 예에서는 일반 자산으로 생성되었습니다.

여파

시간이 좀 지났고 더 이상 허름하고 텅 비어 보이는 이미지 없는 기사가 없다는 사실, 이미지가 디자이너가 만든 것과 거의 일치한다는 사실, 디자이너는 오로지 자신에게만 집중할 수 있다는 사실에 모두가 기뻐합니다. 회사 전체의 기타 마케팅 활동을 위한 설계

그러나 새로운 문제가 발생했습니다. 때때로 고객이 생성된 이미지가 마음에 들지 않아 특정 게시물에 대한 새 스크립트를 생성하기 위해 스크립트를 실행하라고 요청했습니다.

다음 사이드 퀘스트: 특정 게시물에 대해 인공 지능을 사용하여 추천 이미지를 수동으로 생성하는 Wordpress 플러그인

위 내용은 AWS JavaScript WordPress = 인공 지능을 사용한 재미있는 콘텐츠 자동화 전략의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!