📌 2차회의

전체적인 UI를 새롭게 바꿧다. (위치 또는 필요한 DB와 활용 할 수 있는 최대한에 데이터 및 기능을 넣기 위해 노력했다... )눈에 더 보기쉽게 최대한 바꾸려고 노력했고 사진에서 보이듯 각각의 섹션을 나눠서 개발을 진행하기로 했다. (11/26회의 진행) 나는 지도부분을 맡아서 지도에 맞는 도를 클릭하면 옆 패널에서 공공데이터에서 가져온 csv파일을 php로 넘겨서 웹에서 보여 줄 수 있게 했다. (mysql에 공공데이터 csv를 import 해서 php로 넘겨줄 수 있게 사용했다.)

XAMPP를 사용해서 내 로컬에서 돌려본 결과는 잘 나왔기에 확인은 끝냈고 데이터를 어떻게 더 유용하게 끄집어낼지...sql문 정리중이였다.

<?php
// MySQL 연결 설정
// get_data.php
$servername = "localhost";
$username = "root";
$password = "1234";
$database = "data";

// MySQL 연결 생성
$conn = new mysqli($servername, $username, $password, $database);

// 연결 확인
if ($conn->connect_error) {
    die("MySQL 연결 실패: " . $conn->connect_error);
}

// 데이터 가져오기
$sql = "SELECT start, end, region, region1, sport FROM data";
$result = $conn->query($sql);

$data = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// JSON 형식으로 데이터 반환
header('Content-Type: application/json');
echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

$conn->close();
?>

// 데이터 로드
if (typeof regionData === 'undefined') { // regionData가 선언되지 않았을 경우만 선언
  var regionData = {}; // 전역 변수로 선언
}

// PHP에서 데이터 가져오기
fetch('../../backend/get_data.php') // PHP 경로 수정
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    data.forEach(item => {
      if (!regionData[item.region]) {
        regionData[item.region] = []; // 지역별 데이터를 배열로 초기화
      }
      regionData[item.region].push(item); // 데이터 매핑
    });
  })
  .catch(error => console.error('데이터 로드 오류:', error));

// 지역 클릭 이벤트 핸들러
document.addEventListener('DOMContentLoaded', () => {
  const regions = document.querySelectorAll('.region');
  regions.forEach(region => {
    region.addEventListener('click', () => {
      const regionName = region.getAttribute('data-name');
      const infoPanel = document.getElementById('region-data');

      // 데이터 확인 및 업데이트
      if (regionData[regionName]) {
        const dataList = regionData[regionName];
        let htmlContent = `<strong>지역 이름:</strong> ${regionName}<br><hr>`;
        dataList.forEach((data, index) => {
          htmlContent += `
            <div>
              <strong>항목 ${index + 1}:</strong><br>
              <strong>시작일:</strong> ${data.start}<br>
              <strong>종료일:</strong> ${data.end}<br>
              <strong>지역:</strong> ${data.region1}<br>
              <strong>스포츠 프로그램:</strong> ${data.sport}<br>
              <hr>
            </div>
          `;
        });
        infoPanel.innerHTML = htmlContent;
      } else {
        infoPanel.innerHTML = `데이터가 없습니다.`;
      }
    });
  });
});

📌 재미로 만든 생성이미지 AI

이번에 홈페이지에 그림크기대로 이정도에 배치하면 좋겠다해서 이미지를 내가 직접 만들어서 페이지에 넣어놨엇다. 전 생성형AI교육에서 배웠던 내용들을 이용했다.

내가 선택한 클레이(?) 느낌이 나는 모델을 선택해서 원하는 이미지를 만들기 위해 프롬포트에 영어라 3문장정도 적으니 알아서 이미지와 그에 맞는 고유번호를 15초 안에 생성해주었다. 이번에는 잠깐 사용한 StabilityMatrix였는데 다음에 이용하면 더 좋은 값을 얻어내고 유용하게 사용될거 같은 느낌이다.

{
  "last_node_id": 9,
  "last_link_id": 9,
  "nodes": [
    {
      "id": 8,
      "type": "VAEDecode",
      "pos": [
        1209,
        188
      ],
      "size": [
        210,
        46
      ],
      "flags": {},
      "order": 5,
      "mode": 0,
      "inputs": [
        {
          "name": "samples",
          "type": "LATENT",
          "link": 7
        },
        {
          "name": "vae",
          "type": "VAE",
          "link": 8
        }
      ],
      "outputs": [
        {
          "name": "IMAGE",
          "type": "IMAGE",
          "links": [
            9
          ],
          "slot_index": 0
        }
      ],
      "properties": {
        "Node name for S&R": "VAEDecode"
      },
      "widgets_values": []
    },
    {
      "id": 9,
      "type": "SaveImage",
      "pos": [
        1451,
        189
      ],
      "size": [
        210,
        270
      ],
      "flags": {},
      "order": 6,
      "mode": 0,
      "inputs": [
        {
          "name": "images",
          "type": "IMAGE",
          "link": 9
        }
      ],
      "outputs": [],
      "properties": {},
      "widgets_values": [
        "ComfyUI"
      ]
    },
    {
      "id": 4,
      "type": "CheckpointLoaderSimple",
      "pos": [
        26,
        474
      ],
      "size": [
        315,
        98
      ],
      "flags": {},
      "order": 0,
      "mode": 0,
      "inputs": [],
      "outputs": [
        {
          "name": "MODEL",
          "type": "MODEL",
          "links": [
            1
          ],
          "slot_index": 0
        },
        {
          "name": "CLIP",
          "type": "CLIP",
          "links": [
            3,
            5
          ],
          "slot_index": 1
        },
        {
          "name": "VAE",
          "type": "VAE",
          "links": [
            8
          ],
          "slot_index": 2
        }
      ],
      "properties": {
        "Node name for S&R": "CheckpointLoaderSimple"
      },
      "widgets_values": [
        "nigi3d_v20.safetensors"
      ]
    },
    {
      "id": 5,
      "type": "EmptyLatentImage",
      "pos": [
        471,
        630
      ],
      "size": [
        315,
        106
      ],
      "flags": {},
      "order": 1,
      "mode": 0,
      "inputs": [],
      "outputs": [
        {
          "name": "LATENT",
          "type": "LATENT",
          "links": [
            2
          ],
          "slot_index": 0
        }
      ],
      "properties": {
        "Node name for S&R": "EmptyLatentImage"
      },
      "widgets_values": [
        512,
        512,
        1
      ]
    },
    {
      "id": 7,
      "type": "CLIPTextEncode",
      "pos": [
        413,
        389
      ],
      "size": [
        425.27801513671875,
        180.6060791015625
      ],
      "flags": {},
      "order": 3,
      "mode": 0,
      "inputs": [
        {
          "name": "clip",
          "type": "CLIP",
          "link": 5
        }
      ],
      "outputs": [
        {
          "name": "CONDITIONING",
          "type": "CONDITIONING",
          "links": [
            6
          ],
          "slot_index": 0
        }
      ],
      "properties": {
        "Node name for S&R": "CLIPTextEncode"
      },
      "widgets_values": [
        ""
      ]
    },
    {
      "id": 3,
      "type": "KSampler",
      "pos": [
        863,
        186
      ],
      "size": [
        315,
        474
      ],
      "flags": {},
      "order": 4,
      "mode": 0,
      "inputs": [
        {
          "name": "model",
          "type": "MODEL",
          "link": 1
        },
        {
          "name": "positive",
          "type": "CONDITIONING",
          "link": 4
        },
        {
          "name": "negative",
          "type": "CONDITIONING",
          "link": 6
        },
        {
          "name": "latent_image",
          "type": "LATENT",
          "link": 2
        }
      ],
      "outputs": [
        {
          "name": "LATENT",
          "type": "LATENT",
          "links": [
            7
          ],
          "slot_index": 0
        }
      ],
      "properties": {
        "Node name for S&R": "KSampler"
      },
      "widgets_values": [
        392844795144919,
        "randomize",
        20,
        8,
        "euler",
        "normal",
        1
      ]
    },
    {
      "id": 6,
      "type": "CLIPTextEncode",
      "pos": [
        415,
        186
      ],
      "size": [
        422.84503173828125,
        164.31304931640625
      ],
      "flags": {},
      "order": 2,
      "mode": 0,
      "inputs": [
        {
          "name": "clip",
          "type": "CLIP",
          "link": 3
        }
      ],
      "outputs": [
        {
          "name": "CONDITIONING",
          "type": "CONDITIONING",
          "links": [
            4
          ],
          "slot_index": 0
        }
      ],
      "properties": {
        "Node name for S&R": "CLIPTextEncode"
      },
      "widgets_values": [
        "\"3D illustration of a person horseback riding, wearing equestrian gear and a helmet, holding the reins, clay style, pastel colors, soft shadows, rounded shapes, isometric view, minimalistic, clean background, sport app style, smooth texture, Blender 3D style, sport icon series, single character illustration, phone app icon design\""
      ]
    }
  ],
  "links": [
    [
      1,
      4,
      0,
      3,
      0,
      "MODEL"
    ],
    [
      2,
      5,
      0,
      3,
      3,
      "LATENT"
    ],
    [
      3,
      4,
      1,
      6,
      0,
      "CLIP"
    ],
    [
      4,
      6,
      0,
      3,
      1,
      "CONDITIONING"
    ],
    [
      5,
      4,
      1,
      7,
      0,
      "CLIP"
    ],
    [
      6,
      7,
      0,
      3,
      2,
      "CONDITIONING"
    ],
    [
      7,
      3,
      0,
      8,
      0,
      "LATENT"
    ],
    [
      8,
      4,
      2,
      8,
      1,
      "VAE"
    ],
    [
      9,
      8,
      0,
      9,
      0,
      "IMAGE"
    ]
  ],
  "groups": [],
  "config": {},
  "extra": {
    "ds": {
      "scale": 0.5644739300537776,
      "offset": [
        23.701486727631533,
        -25.30468823417241
      ]
    }
  },
  "version": 0.4
}