이미지 생성 기능 개발 방향 수정

상황 : dalle 3 이미지 생성 ai를 활용한 이미지 시각화 기능을 만들고 있었음.

---

문제1 . 이미지가 내가 원하는대로 생성해주지 않음.  

 

ex) 외주비라고 prompt를 통해 이미지를 생성하면

왜나라 거주지의 비내리는 장면을 생성해준다. 

문제2. 이미지 url 리소스 기간 만료 문제

 

mern 프로젝트에서 dalle 를 통해 이미지를 생성해서 cloudinary에 저장한 후 mongodb에 url을 저장해서 불러오는 프로젝트를 채택했는데 문제가 생성이미지를 다듬어 놓은 cloudinary의 url 리소스 기간이 만료가 된다는 것.

(늘릴 수는 있지만 개인적으로 감당하기 어려운 보안 문제들이 발생)

 

 

---

아래의 내 코드와 구상 및 설계가 무효가 되는...

내 개발 삽질들을 보여주는 서버 git 브랜치들...

---

설계내역

기존 이미지가 없다면 업데이트.
있다면 못바꾸고 출력만 하도록 수정.

프롬프트라는 생성 정보를 입력하는 대신에
기존 데이터에 있던 title, description 내용을 prompt로 사용하도록 했음
그래서 객체 배열로 지정.

3번 이상의  이미지 수정 후의 변동을 막기 위해 데이터 구조를 변경했고,
추가적으로 그 데이터로 3번제어하는 코드를 작성.

이제 할일
1. 이미지 띄워줄 공간 생성.
2. 서버를 연결 특히. 

---

<클라이언트 코드>

 const createImage = async (id) => {

    try {

      const incomeResponse = await axios.get(

        `http://localhost:3000/user/get-incomes/${id}`

      );

      const income = incomeResponse.data;

      if (income.generationCount >= 3) {

        console.log("이미지 생성 한도에 도달했습니다.");

        return; // 이미 생성 횟수가 3회 이상이면 추가 생성 중단

      }

      if (income.image && income.image.url) {

        setImages((prev) => ({ ...prev, [id]: income.image }));

        console.log("Image already exists:", income.image.url);

      } else {

        const prompt = `${income.title}. ${income.description}`;

        const imageResponse = await axios.post(

          "http://localhost:3000/user/generate-image",

          { prompt }

        );

        await axios.patch(

          `http://localhost:3000/user/update-income-image/${id}`,

          {

            image: {

              prompt: prompt,

              url: imageResponse.data.url,

              public_id: imageResponse.data.public_id,

            },

            generationCount: income.generationCount + 1,

          }

        );

        const updatedIncomeResponse = await axios.get(

          `http://localhost:3000/user/get-incomes/${id}`

        );

        setImages((prev) => ({

          ...prev,

          [id]: updatedIncomeResponse.data.image,

        }));

        console.log(

          "New image generated and saved:",

          updatedIncomeResponse.data.image.url

        );

      }

    } catch (error) {

      console.error("이미지 생성 처리 중 오류 발생:", error);

      setError(

        error.response ? error.response.data.message : "오류가 발생했습니다"

      );

    }

  };

---

개선 방향

네이버 오픈 api의 이미지 검색 기능을 사용해보기로 함

 

 

---

장점 : 검색시 검색 단어와 연관성이 높은 이미지를 제시